fix(ionContent): do not let child scopes inherit has-* classes

Fixes #924
ionic-team · Mar 27, 2014 · a5eb48b · a5eb48b
1 parent 1984dd6
commit a5eb48b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
@@ -80,18 +80,25 @@ function($timeout, $controller, $ionicBind) {
 
       return { pre: prelink };
       function prelink($scope, $element, $attr, navViewCtrl) {
+        var parentScope = $scope.$parent;
         $scope.$watch(function() {
-          return ($scope.$hasHeader ? ' has-header' : '')  +
-            ($scope.$hasSubheader ? ' has-subheader' : '') +
-            ($scope.$hasFooter ? ' has-footer' : '') +
-            ($scope.$hasSubfooter ? ' has-subfooter' : '') +
-            ($scope.$hasTabs ? ' has-tabs' : '') +
-            ($scope.$hasTabsTop ? ' has-tabs-top' : '');
+          return (parentScope.$hasHeader ? ' has-header' : '')  +
+            (parentScope.$hasSubheader ? ' has-subheader' : '') +
+            (parentScope.$hasFooter ? ' has-footer' : '') +
+            (parentScope.$hasSubfooter ? ' has-subfooter' : '') +
+            (parentScope.$hasTabs ? ' has-tabs' : '') +
+            (parentScope.$hasTabsTop ? ' has-tabs-top' : '');
         }, function(className, oldClassName) {
           $element.removeClass(oldClassName);
           $element.addClass(className);
         });
 
+        //Only this ionContent should use these variables from parent scopes
+        $scope.$hasHeader = $scope.$hasSubheader =
+          $scope.$hasFooter = $scope.$hasSubfooter =
+          $scope.$hasTabs = $scope.$hasTabsTop =
+          false;
+
         $ionicBind($scope, $attr, {
           $onScroll: '&onScroll',
           $onScrollComplete: '&onScrollComplete',

diff --git a/js/ext/angular/test/directive/ionicContent.unit.js b/js/ext/angular/test/directive/ionicContent.unit.js
@@ -52,12 +52,20 @@ describe('Ionic Content directive', function() {
       expect(element.hasClass(className)).toBe(false);
       expect(scope[scopeVar]).toBeFalsy();
 
-      scope.$apply(scopeVar + ' = true');
+      scope.$apply('$parent.' + scopeVar + ' = true');
       expect(element.hasClass(className)).toBe(true);
 
-      scope.$apply(scopeVar + ' = false');
+      scope.$apply('$parent.' + scopeVar + ' = false');
       expect(element.hasClass(className)).toBe(false);
     });
+
+    it('should set $scope.' + scopeVar + ' to false on the ionContent element child scope, to stop inheritance of the has* classes', function() {
+      var compileScope = scope.$new();
+      compileScope[scopeVar] = true;
+      var element = compile('<ion-content>')(compileScope);
+      expect(compileScope[scopeVar]).toBe(true);
+      expect(element.scope()[scopeVar]).toBe(false);
+    });
   });
 
   it('should have no scroll element when scroll="false"', function() {
@@ -74,11 +82,11 @@ describe('Ionic Content directive', function() {
     // 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(scroll.hasClass('padding')).toEqual(true);
     expect(element.hasClass('padding')).toEqual(false);
-    
+
     element.scope().$apply('shouldPad = false');
     expect(scroll.hasClass('padding')).toEqual(false);
     expect(element.hasClass('padding')).toEqual(false);

diff --git a/js/ext/angular/test/modal.html b/js/ext/angular/test/modal.html
@@ -38,10 +38,10 @@ <h1 class="title">Modal</h1>
 
     <script id="modal.html" type="text/ng-template">
       <div class="modal" ng-controller="ModalCtrl">
-        <header class="bar bar-header bar-assertive">
+        <ion-header-bar>
           <h1 class="title">New Contact</h1>
-        </header>
-        <ion-content class="has-header">
+        </ion-header-bar>
+        <ion-content>
           <div class="padding">
             <div class="list">
               <label class="item item-input">