feat(tabs): Allow disabled tab items

Author: Becky Conning

Diff for: js/angular/directive/tab.js

@@ -32,6 +32,8 @@
  * @param {expression=} on-select Called when this tab is selected.
  * @param {expression=} on-deselect Called when this tab is deselected.
  * @param {expression=} ng-click By default, the tab will be selected on click. If ngClick is set, it will not.  You can explicitly switch tabs using {@link ionic.service:$ionicTabsDelegate#select $ionicTabsDelegate.select()}.
+ * @param {expression=} hidden Whether the tab is to be hidden or not.
+ * @param {expression=} disabled Whether the tab is to be disabled or not.
  */
 IonicModule
 .directive('ionTab', [
@@ -64,6 +66,7 @@ function($compile, $ionicConfig, $ionicBind, $ionicViewSwitcher) {
         attrStr('badge', attr.badge) +
         attrStr('badge-style', attr.badgeStyle) +
         attrStr('hidden', attr.hidden) +
+        attrStr('disabled', attr.disabled) +
         attrStr('class', attr['class']) +
         '></ion-tab-nav>';
 

Diff for: js/angular/directive/tabNav.js

@@ -6,7 +6,7 @@ IonicModule
     require: ['^ionTabs', '^ionTab'],
     template:
     '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
-      ' class="tab-item">' +
+      ' ng-disabled="disabled()" class="tab-item">' +
       '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
       '<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
       '<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()"></i>' +
@@ -19,6 +19,7 @@ IonicModule
       iconOff: '@',
       badge: '=',
       hidden: '@',
+      disabled: '&',
       badgeStyle: '@',
       'class': '@'
     },

Diff for: test/unit/angular/directive/tabs.unit.js

@@ -387,15 +387,16 @@ describe('tabs', function() {
     });
 
     it('should compile a <ion-tab-nav> with all of the relevant attrs', function() {
-      setup('title="{{a}}" icon-on="{{b}}" icon-off="{{c}}" badge="d" badge-style="{{e}}" class="{{f}}" ng-click="click" hidden="{{g}}"');
+      setup('title="{{a}}" icon-on="{{b}}" icon-off="{{c}}" badge="d" badge-style="{{e}}" class="{{f}}" ng-click="click" hidden="{{g}}" disabled="h"');
       angular.extend(tabEl.scope(), {
         a: 'title',
         b: 'on',
         c: 'off',
         d: 6,
         e: 'badger',
         f: 'someClass',
-        g: true
+        g: true,
+        h: true
       });
       tabEl.scope().$apply();
       var navItem = angular.element(tabsEl[0].querySelector('.tab-item'));
@@ -407,6 +408,7 @@ describe('tabs', function() {
       expect(navItem[0].className).toMatch(/someClass/);
       expect(navItem.attr('ng-click')).toEqual('click');
       expect(navItem.isolateScope().hidden).toEqual('true');
+      expect(navItem.isolateScope().disabled()).toEqual(true);
 
       angular.extend(tabEl.scope(), {
         a: 'title2',
@@ -415,7 +417,8 @@ describe('tabs', function() {
         d: 7,
         e: 'badger2',
         f: 'someClass2',
-        g: false
+        g: false,
+        h: false
       });
       tabEl.scope().$apply();
       expect(navItem.isolateScope().title).toEqual('title2');
@@ -425,6 +428,7 @@ describe('tabs', function() {
       expect(navItem.isolateScope().badgeStyle).toEqual('badger2');
       expect(navItem[0].className).toMatch(/someClass2/);
       expect(navItem.isolateScope().hidden).toEqual('false');
+      expect(navItem.isolateScope().disabled()).toEqual(false);
 
       expect(navItem.parent()[0]).toBe(tabsCtrl.$tabsElement[0]);
     });