From a5eb48b9569d3c9f90c238a7ce6f33b5753266f7 Mon Sep 17 00:00:00 2001
From: Andy Joslin <andytjoslin@gmail.com>
Date: Thu, 27 Mar 2014 08:16:02 -0600
Subject: [PATCH] fix(ionContent): do not let child scopes inherit has-*
 classes

Fixes #924
---
 js/ext/angular/src/directive/ionicContent.js  | 19 +++++++++++++------
 .../test/directive/ionicContent.unit.js       | 16 ++++++++++++----
 js/ext/angular/test/modal.html                |  6 +++---
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
index 432a7f173cb..e18683cc7cb 100644
--- 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
index e8fe9e10246..546fa65d81f 100644
--- 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
index 8f2c7fec08b..062a0a4743e 100644
--- 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">