feat(ionTab): add class attribute to tab items

ionic-team · Jun 11, 2014 · e6f79cc · e6f79cc
1 parent 6af5d68
commit e6f79cc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/js/angular/directive/tab.js b/js/angular/directive/tab.js
@@ -64,6 +64,7 @@ function($rootScope, $animate, $ionicBind, $compile) {
         attrStr('icon-off', attr.iconOff) +
         attrStr('badge', attr.badge) +
         attrStr('badge-style', attr.badgeStyle) +
+        attrStr('class', attr.class) +
         '></ion-tab-nav>';
 
       //Remove the contents of the element so we can compile them later, if tab is selected

diff --git a/js/angular/directive/tabNav.js b/js/angular/directive/tabNav.js
@@ -6,7 +6,7 @@ IonicModule
     require: ['^ionTabs', '^ionTab'],
     template:
     '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge}" ' +
-      ' class="tab-item">' +
+      ' class="tab-item {{class}}">' +
       '<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>' +
@@ -18,7 +18,8 @@ IonicModule
       iconOn: '@',
       iconOff: '@',
       badge: '=',
-      badgeStyle: '@'
+      badgeStyle: '@',
+      class: '@'
     },
     compile: function(element, attr, transclude) {
       return function link($scope, $element, $attrs, ctrls) {

diff --git a/test/unit/angular/directive/tabs.unit.js b/test/unit/angular/directive/tabs.unit.js
@@ -390,13 +390,14 @@ 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}}" ng-click="click"');
+      setup('title="{{a}}" icon-on="{{b}}" icon-off="{{c}}" badge="d" badge-style="{{e}}" class="{{f}}" ng-click="click"');
       angular.extend(tabEl.scope(), {
         a: 'title',
         b: 'on',
         c: 'off',
         d: 6,
-        e: 'badger'
+        e: 'badger',
+        f: 'class'
       });
       tabEl.scope().$apply();
       var navItem = angular.element(tabsEl[0].querySelector('.tab-item'));
@@ -405,21 +406,24 @@ describe('tabs', function() {
       expect(navItem.isolateScope().iconOff).toEqual('off');
       expect(navItem.isolateScope().badge).toEqual(6);
       expect(navItem.isolateScope().badgeStyle).toEqual('badger');
+      expect(navItem.isolateScope().class).toEqual('class');
       expect(navItem.attr('ng-click')).toEqual('click');
 
       angular.extend(tabEl.scope(), {
         a: 'title2',
         b: 'on2',
         c: 'off2',
         d: 7,
-        e: 'badger2'
+        e: 'badger2',
+        f: 'class2'
       });
       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.isolateScope().class).toEqual('class2');
 
       expect(navItem.parent()[0]).toBe(tabsCtrl.$tabsElement[0]);
     });