fix(tab): make active optional

This change makes the active binding added under angular-ui#5425 optional. Closes angular-ui#5489
deeg · Feb 17, 2016 · d1553a4 · d1553a4
1 parent 8b3e86f
commit d1553a4
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
@@ -88,7 +88,7 @@ angular.module('ui.bootstrap.tabs', [])
     replace: true,
     scope: {},
     bindToController: {
-      active: '=',
+      active: '=?',
       type: '@'
     },
     controller: 'UibTabsetController',
@@ -101,6 +101,9 @@ angular.module('ui.bootstrap.tabs', [])
         scope.$parent.$eval(attrs.vertical) : false;
       scope.justified = angular.isDefined(attrs.justified) ?
         scope.$parent.$eval(attrs.justified) : false;
+      if (angular.isUndefined(attrs.active)) {
+        scope.active = 0;
+      }
     }
   };
 })
@@ -115,7 +118,7 @@ angular.module('ui.bootstrap.tabs', [])
     transclude: true,
     scope: {
       heading: '@',
-      index: '=',
+      index: '=?',
       onSelect: '&select', //This callback is called in contentHeadingTransclude
                           //once it inserts the tab's content into the dom
       onDeselect: '&deselect'
@@ -132,6 +135,14 @@ angular.module('ui.bootstrap.tabs', [])
         });
       }
 
+      if (angular.isUndefined(attrs.index)) {
+        if (tabsetCtrl.tabs && tabsetCtrl.tabs.length) {
+          scope.index = Math.max.apply(null, tabsetCtrl.tabs.map(function(t) { return t.index; })) + 1;
+        } else {
+          scope.index = 0;
+        }
+      }
+
       scope.select = function() {
         if (!scope.disabled) {
           var index;

diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
@@ -153,6 +153,41 @@ describe('tabs', function() {
     });
   });
 
+  describe('without active binding and index attributes', function() {
+    beforeEach(inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.first = '1';
+      scope.second = '2';
+      elm = $compile([
+        '<uib-tabset>',
+        '  <uib-tab heading="First Tab {{first}}">',
+        '    first content is {{first}}',
+        '  </uib-tab>',
+        '  <uib-tab heading="Second Tab {{second}}">',
+        '    second content is {{second}}',
+        '  </uib-tab>',
+        '</uib-tabset>'
+      ].join('\n'))(scope);
+      scope.$apply();
+      return elm;
+    }));
+
+    it('should bind tabs content and set first tab active', function() {
+      expectContents(['first content is 1', 'second content is 2']);
+      expect(titles().eq(0)).toHaveClass('active');
+      expect(titles().eq(1)).not.toHaveClass('active');
+      expect(elm.controller('uibTabset').active).toBe(0);
+    });
+
+    it('should change active on click', function() {
+      titles().eq(1).find('> a').click();
+      expect(contents().eq(1)).toHaveClass('active');
+      expect(titles().eq(0)).not.toHaveClass('active');
+      expect(titles().eq(1)).toHaveClass('active');
+      expect(elm.controller('uibTabset').active).toBe(1);
+    });
+  });
+
   describe('tab callback order', function() {
     var execOrder;
     beforeEach(inject(function($compile, $rootScope) {
@@ -579,7 +614,7 @@ describe('tabs', function() {
   describe('remove', function() {
     it('should remove title tabs when elements are destroyed and change selection', inject(function($controller, $compile, $rootScope) {
       scope = $rootScope.$new();
-      elm = $compile('<uib-tabset active="active"><uib-tab heading="1">Hello</uib-tab><uib-tab index="$index" ng-repeat="i in list" heading="tab {{i}}">content {{i}}</uib-tab></uib-tabset>')(scope);
+      elm = $compile('<uib-tabset active="active"><uib-tab index="0" heading="1">Hello</uib-tab><uib-tab index="$index + 1" ng-repeat="i in list" heading="tab {{i}}">content {{i}}</uib-tab></uib-tabset>')(scope);
       scope.$apply();
 
       expectTitles(['1']);