fix(ionHeaderBar): have no side effects with content in other views

Closes #1095
ionic-team · Apr 29, 2014 · 7fd31b6 · 7fd31b6
1 parent b87bcb3
commit 7fd31b6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/js/angular/directive/headerFooterBar.js b/js/angular/directive/headerFooterBar.js
@@ -88,7 +88,7 @@ function tapScrollToTopDirective() {
                 current.tagName.match(/input|textarea|select/i) ||
                 current.isContentEditable) {
               return;
-            } 
+            }
             current = current.parentNode;
           }
           var touch = e.gesture && e.gesture.touches[0] || e.detail.touches[0];
@@ -121,26 +121,26 @@ function headerFooterBarDirective(isHeader) {
           });
 
           var el = $element[0];
-          //just incase header is on rootscope
-          var parentScope = $scope.$parent || $scope;
 
           if (isHeader) {
             $scope.$watch(function() { return el.className; }, function(value) {
               var isSubheader = value.indexOf('bar-subheader') !== -1;
-              parentScope.$hasHeader = !isSubheader;
-              parentScope.$hasSubheader = isSubheader;
+              $scope.$hasHeader = !isSubheader;
+              $scope.$hasSubheader = isSubheader;
             });
             $scope.$on('$destroy', function() {
-              parentScope.$hasHeader = parentScope.$hasSubheader = null;
+              delete $scope.$hasHeader;
+              delete $scope.$hasSubheader;
             });
           } else {
             $scope.$watch(function() { return el.className; }, function(value) {
               var isSubfooter = value.indexOf('bar-subfooter') !== -1;
-              parentScope.$hasFooter = !isSubfooter;
-              parentScope.$hasSubfooter = isSubfooter;
+              $scope.$hasFooter = !isSubfooter;
+              $scope.$hasSubfooter = isSubfooter;
             });
             $scope.$on('$destroy', function() {
-              parentScope.$hasFooter = parentScope.$hasSubfooter = null;
+              delete $scope.$hasFooter;
+              delete $scope.$hasSubfooter;
             });
             $scope.$watch('$hasTabs', function(val) {
               $element.toggleClass('has-tabs', !!val);

diff --git a/js/angular/directive/tabs.js b/js/angular/directive/tabs.js
@@ -75,7 +75,8 @@ IonicModule
           $scope.$hasTabsTop = isTabsTop && !isHidden;
         });
         $scope.$on('$destroy', function() {
-          $scope.$hasTabs = $scope.$hasTabsTop = null;
+          delete $scope.$hasTabs;
+          delete $scope.$hasTabsTop;
         });
       }
     }

diff --git a/test/html/viewState.html b/test/html/viewState.html
@@ -172,6 +172,9 @@ <h3>Information</h3>
           </button>
         </ion-nav-buttons>
       <ion-view title="Auto List">
+        <ion-header-bar class="bar bar-subheader bar-energized">
+          <h1 class="title">some subheader</h1>
+        </ion-header-bar>
         <ion-content padding="true">
           <ion-list>
             <ion-item ng-repeat="auto in autos"

diff --git a/test/unit/angular/directive/headerFooterBar.unit.js b/test/unit/angular/directive/headerFooterBar.unit.js
@@ -98,7 +98,7 @@ describe('bar directives', function() {
       if (data.tag === 'ion-header-bar') {
         it('$hasHeader $hasSubheader', function() {
           var el = setup();
-          var scope = el.scope().$parent;
+          var scope = el.scope();
           expect(scope.$hasHeader).toEqual(true);
           expect(scope.$hasSubheader).toEqual(false);
           el.addClass('bar-subheader');
@@ -113,7 +113,7 @@ describe('bar directives', function() {
       } else {
         it('$hasFooter $hasSubheader', function() {
           var el = setup();
-          var scope = el.scope().$parent;
+          var scope = el.scope();
           expect(scope.$hasFooter).toEqual(true);
           expect(scope.$hasSubfooter).toEqual(false);
           el.addClass('bar-subfooter');
@@ -127,7 +127,7 @@ describe('bar directives', function() {
         });
         it('.has-tabs', function() {
           var el = setup();
-          var scope = el.scope().$parent;
+          var scope = el.scope();
           expect(el.hasClass('has-tabs')).toBe(false);
           scope.$apply('$hasTabs = true');
           expect(el.hasClass('has-tabs')).toBe(true);