From 73da93d4a42dd82ffbba9e18e12e70d39ff51a39 Mon Sep 17 00:00:00 2001 From: Jay Proulx Date: Tue, 25 Mar 2014 14:35:01 -0400 Subject: [PATCH] feat(ionContent): don't wrap in a .scroll element if scroll="false" Fixes #841. Closes #897. --- js/ext/angular/src/directive/ionicContent.js | 17 ++++++--- .../test/directive/ionicContent.unit.js | 37 ++++++++++++++++--- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 8fb52f8be7..e83a56a082 100644 --- 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('
'); - 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('
'); + 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 index 5d481d99c8..e8fe9e1024 100644 --- 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('')(scope); + var scroll = element.find('.scroll'); + + expect(scroll.length).toBe(0); + }); + + it('should add padding classname to scroll element', function() { var element = compile('')(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('')(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() {