fix(ionTab): make sure all tab-nav attributes are re-interpolated on change

Fixes #955.

Closes #1071.

Author: ajoslin

Diff for: js/ext/angular/src/directive/ionicTabBar.js

@@ -214,7 +214,7 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
     controller: 'ionicTabs',
     compile: function(element, attr) {
       element.addClass('view');
-      //We cannot use regular transclude here because it breaks element.data() 
+      //We cannot use regular transclude here because it breaks element.data()
       //inheritance on compile
       var innerElement = angular.element('<div class="tabs"></div>');
       innerElement.append(element.contents());
@@ -318,19 +318,36 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService, $state,
     controller: 'ionicTab',
     scope: true,
     compile: function(element, attr) {
-      var navView = element[0].querySelector('ion-nav-view') || 
+      var navView = element[0].querySelector('ion-nav-view') ||
         element[0].querySelector('data-ion-nav-view');
       var navViewName = navView && navView.getAttribute('name');
 
+
+      //We create the tabNavElement in the compile phase so that the
+      //attributes we pass down won't be interpolated yet - we want
+      //to pass down the 'raw' versions of the attributes
+      var tabNavElement = angular.element(
+        '<ion-tab-nav' +
+        attrStr('ng-click', attr.ngClick) +
+        attrStr('title', attr.title) +
+        attrStr('icon', attr.icon) +
+        attrStr('icon-on', attr.iconOn) +
+        attrStr('icon-off', attr.iconOff) +
+        attrStr('badge', attr.badge) +
+        attrStr('badge-style', attr.badgeStyle) +
+        '></ion-tab-nav>'
+      );
+
       //Remove the contents of the element so we can compile them later, if tab is selected
       //We don't use regular transclusion because it breaks element inheritance
       var tabContent = angular.element('<div class="pane">')
         .append( element.contents().remove() );
 
       return function link($scope, $element, $attr, ctrls) {
-        var childScope, childElement, tabNavElement;
-          tabsCtrl = ctrls[0],
-          tabCtrl = ctrls[1];
+        var childScope;
+        var childElement;
+        var tabsCtrl = ctrls[0];
+        var tabCtrl = ctrls[1];
 
         $ionicBind($scope, $attr, {
           animate: '=',
@@ -362,17 +379,6 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService, $state,
           }
         }
 
-        tabNavElement = angular.element(
-          '<ion-tab-nav' +
-          attrStr('ng-click', attr.ngClick) +
-          attrStr('title', attr.title) +
-          attrStr('icon', attr.icon) +
-          attrStr('icon-on', attr.iconOn) +
-          attrStr('icon-off', attr.iconOff) +
-          attrStr('badge', attr.badge) +
-          attrStr('badge-style', attr.badgeStyle) +
-          '></ion-tab-nav>'
-        );
         tabNavElement.data('$ionTabsController', tabsCtrl);
         tabNavElement.data('$ionTabController', tabCtrl);
         tabsCtrl.$tabsElement.append($compile(tabNavElement)($scope));

Diff for: js/ext/angular/test/directive/ionicTabBar.unit.js

@@ -382,23 +382,45 @@ describe('tabs', function() {
     }));
 
     it('should add itself to tabsCtrl and remove on $destroy', function() {
-      var el = setup();
+      setup();
       var tab = tabsCtrl.tabs[0];
       tab.$destroy();
       expect(tabsCtrl.remove).toHaveBeenCalledWith(tab);
     });
 
     it('should compile a <ion-tab-nav> with all of the relevant attrs', function() {
-      setup('title=1 icon-on=2 icon-off=3 badge=4 badge-style=5 ng-click=6');
+      setup('title="{{a}}" icon-on="{{b}}" icon-off="{{c}}" badge="d" badge-style="{{e}}" ng-click="click"');
+      angular.extend(tabEl.scope(), {
+        a: 'title',
+        b: 'on',
+        c: 'off',
+        d: 6,
+        e: 'badger'
+      });
+      tabEl.scope().$apply();
       var navItem = angular.element(tabsEl[0].querySelector('.tab-item'));
       //Use .scope for title because we remove title attr
       //(for dom-tooltip not to appear)
-      expect(navItem.scope().title).toEqual('1');
-      expect(navItem.attr('icon-on')).toEqual('2');
-      expect(navItem.attr('icon-off')).toEqual('3');
-      expect(navItem.attr('badge')).toEqual('4');
-      expect(navItem.attr('badge-style')).toEqual('5');
-      expect(navItem.attr('ng-click')).toEqual('6');
+      expect(navItem.isolateScope().title).toEqual('title');
+      expect(navItem.isolateScope().iconOn).toEqual('on');
+      expect(navItem.isolateScope().iconOff).toEqual('off');
+      expect(navItem.isolateScope().badge).toEqual(6);
+      expect(navItem.isolateScope().badgeStyle).toEqual('badger');
+      expect(navItem.attr('ng-click')).toEqual('click');
+
+      angular.extend(tabEl.scope(), {
+        a: 'title2',
+        b: 'on2',
+        c: 'off2',
+        d: 7,
+        e: 'badger2'
+      });
+      tabEl.scope().$apply();
+      expect(navItem.isolateScope().title).toEqual('title2');
+      expect(navItem.isolateScope().iconOn).toEqual('on2');
+      expect(navItem.isolateScope().iconOff).toEqual('off2');
+      expect(navItem.isolateScope().badge).toEqual(7);
+      expect(navItem.isolateScope().badgeStyle).toEqual('badger2');
 
       expect(navItem.parent()[0]).toBe(tabsCtrl.$tabsElement[0]);
     });