feat(tab): options 'hidden' attribute for tabs. Closes #1666, #1673

Author: perrygovier

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

@@ -68,6 +68,7 @@ function($rootScope, $animate, $ionicBind, $compile) {
         attrStr('icon-off', attr.iconOff) +
         attrStr('badge', attr.badge) +
         attrStr('badge-style', attr.badgeStyle) +
+        attrStr('hidden', attr.hidden) +
         attrStr('class', attr['class']) +
         '></ion-tab-nav>';
 

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

@@ -5,7 +5,7 @@ IonicModule
     replace: true,
     require: ['^ionTabs', '^ionTab'],
     template:
-    '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge}" ' +
+    '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
       ' class="tab-item">' +
       '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
       '<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
@@ -18,6 +18,7 @@ IonicModule
       iconOn: '@',
       iconOff: '@',
       badge: '=',
+      hidden: '@',
       badgeStyle: '@',
       'class': '@'
     },
@@ -41,6 +42,11 @@ IonicModule
           });
         }
 
+        $scope.isHidden = function() {
+          if($attrs.hidden === 'true' || $attrs.hidden === true)return true;
+          return false;
+        };
+
         $scope.getIconOn = function() {
           return $scope.iconOn || $scope.icon;
         };

Diff for: scss/_tabs.scss

@@ -185,6 +185,9 @@
   &:hover {
     cursor: pointer;
   }
+  &.tab-hidden{
+    display:none;
+  }
 }
 
 .tabs-item-hide > .tabs,

Diff for: test/html/tabs.html

@@ -97,6 +97,15 @@ <h1>Settings</h1>
         </ion-content>
       </ion-tab>
 
+      <ion-tab title="Hidden" icon-on="icon ion-ionic" icon-off="icon ion-ionic" hidden="true">
+        <header class="bar bar-header bar-positive">
+          <h1 class="title">Hidden Tab</h1>
+        </header>
+        <ion-content class="has-header" padding="true">
+          <h1>This tab should be hidden</h1>
+        </ion-content>
+      </ion-tab>
+
     </ion-tabs>
 
     <script id="newTask.html" type="text/ng-template">
@@ -111,7 +120,7 @@ <h1 class="title">New Task</h1>
       </div>
     </script>
 
-    <script>
+    <script type="text/javascript">
       angular.module('tabsTest', ['ionic'])
 
       .controller('RootCtrl', function($scope, $timeout) {

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

@@ -419,14 +419,15 @@ 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"');
+      setup('title="{{a}}" icon-on="{{b}}" icon-off="{{c}}" badge="d" badge-style="{{e}}" class="{{f}}" ng-click="click" hidden="{{g}}"');
       angular.extend(tabEl.scope(), {
         a: 'title',
         b: 'on',
         c: 'off',
         d: 6,
         e: 'badger',
-        f: 'someClass'
+        f: 'someClass',
+        g: true
       });
       tabEl.scope().$apply();
       var navItem = angular.element(tabsEl[0].querySelector('.tab-item'));
@@ -437,14 +438,16 @@ describe('tabs', function() {
       expect(navItem.isolateScope().badgeStyle).toEqual('badger');
       expect(navItem[0].className).toMatch(/someClass/);
       expect(navItem.attr('ng-click')).toEqual('click');
+      expect(navItem.isolateScope().hidden).toEqual('true');
 
       angular.extend(tabEl.scope(), {
         a: 'title2',
         b: 'on2',
         c: 'off2',
         d: 7,
         e: 'badger2',
-        f: 'someClass2'
+        f: 'someClass2',
+        g: false
       });
       tabEl.scope().$apply();
       expect(navItem.isolateScope().title).toEqual('title2');
@@ -453,6 +456,7 @@ describe('tabs', function() {
       expect(navItem.isolateScope().badge).toEqual(7);
       expect(navItem.isolateScope().badgeStyle).toEqual('badger2');
       expect(navItem[0].className).toMatch(/someClass2/);
+      expect(navItem.isolateScope().hidden).toEqual('false');
 
       expect(navItem.parent()[0]).toBe(tabsCtrl.$tabsElement[0]);
     });