feat(ionContent): don't wrap in a .scroll element if scroll="false"

Fixes #841. Closes #897.
ionic-team · Mar 27, 2014 · 73da93d · 73da93d
1 parent cf92d6c
commit 73da93d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
@@ -48,7 +48,7 @@ angular.module('ionic.ui.content', ['ionic.ui.scroll'])
  * with {@link ionic.service:$ionicScrollDelegate}.
  * @param {boolean=} padding Whether to add padding to the content.
  * of the content.  Defaults to true on iOS, false on Android.
- * @param {boolean=} scroll Whether to allow scrolling of content.  Defaults to true.
+ * @param {boolean=} scroll Whether to allow scrolling of content.  Defaults to true. Note: scroll="false" removes the .scroll child element on element compilation, not on scope change
  * @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
  * Ionic scroll.
  * @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
@@ -66,12 +66,17 @@ function($timeout, $controller, $ionicBind) {
     require: '^?ionNavView',
     scope: true,
     compile: function(element, attr) {
+      var innerElement;
+
       element.addClass('scroll-content');
 
-      //We cannot transclude here because it breaks element.data() inheritance on compile
-      var innerElement = angular.element('<div class="scroll"></div>');
-      innerElement.append(element.contents());
-      element.append(innerElement);
+      if (attr.scroll != 'false') {
+        //We cannot use normal transclude here because it breaks element.data() 
+        //inheritance on compile
+        innerElement = angular.element('<div class="scroll"></div>');
+        innerElement.append(element.contents());
+        element.append(innerElement);
+      }
 
       return { pre: prelink };
       function prelink($scope, $element, $attr, navViewCtrl) {
@@ -104,7 +109,7 @@ function($timeout, $controller, $ionicBind) {
 
         if (angular.isDefined($attr.padding)) {
           $scope.$watch($attr.padding, function(newVal) {
-            innerElement.toggleClass('padding', !!newVal);
+              (innerElement || $element).toggleClass('padding', !!newVal);
           });
         }
 

diff --git a/js/ext/angular/test/directive/ionicContent.unit.js b/js/ext/angular/test/directive/ionicContent.unit.js
@@ -60,14 +60,41 @@ describe('Ionic Content directive', function() {
     });
   });
 
-  it('should add padding classname', function() {
+  it('should have no scroll element when scroll="false"', function() {
+    var element = compile('<ion-content scroll="false"></ion-content>')(scope);
+    var scroll = element.find('.scroll');
+
+    expect(scroll.length).toBe(0);
+  });
+
+  it('should add padding classname to scroll element', function() {
     var element = compile('<ion-content padding="shouldPad"></ion-content>')(scope);
-    var scrollElement = element.find('.scroll');
-    expect(scrollElement.hasClass('padding')).toEqual(false);
+    var scroll = element.find('.scroll');
+
+    // by default, ion-content should have a scroll element, and the scroll element should not be padded
+    expect(scroll.hasClass('padding')).toEqual(false);
+    expect(element.hasClass('padding')).toEqual(false);
+
     element.scope().$apply('shouldPad = true');
-    expect(scrollElement.hasClass('padding')).toEqual(true);
+    expect(scroll.hasClass('padding')).toEqual(true);
+    expect(element.hasClass('padding')).toEqual(false);
+
     element.scope().$apply('shouldPad = false');
-    expect(scrollElement.hasClass('padding')).toEqual(false);
+    expect(scroll.hasClass('padding')).toEqual(false);
+    expect(element.hasClass('padding')).toEqual(false);
+
+  });
+
+  // keep scroll=false && padding tests separate as we don't handle a recompile yet when scroll changes.
+  it('should add padding classname to scroll-content element', function() {
+    var element = compile('<ion-content padding="shouldPad" scroll="false"></ion-content>')(scope);
+
+    // when ion-content is not scrollable, there will be no scroll element, the padding should be added to ion-content itself.
+    element.scope().$apply('shouldPad = false');
+    expect(element.hasClass('padding')).toEqual(false);
+
+    element.scope().$apply('shouldPad = true');
+    expect(element.hasClass('padding')).toEqual(true);
   });
 
   it('Should set start x and y', function() {