feat(tabs): Add feature to select tabs through active attribute binding

Author: just-boris

src/tabs/docs/demo.html

@@ -1,6 +1,10 @@
 <div ng-controller="TabsDemoCtrl">
     <tabs>
         <pane heading="Static title">Static content</pane>
-        <pane ng-repeat="pane in panes" heading="{{pane.title}}">{{pane.content}}</pane>
+        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">{{pane.content}}</pane>
     </tabs>
+    <div class="row-fluid">
+        <button class="btn" ng-click="panes[0].active = true">Select second tab</button>
+        <button class="btn" ng-click="panes[1].active = true">Select third tab</button>
+    </div>
 </div>

src/tabs/tabs.js

@@ -2,7 +2,7 @@ angular.module('ui.bootstrap.tabs', [])
 .controller('TabsController', ['$scope', '$element', function($scope, $element) {
   var panes = $scope.panes = [];
 
-  $scope.select = function selectPane(pane) {
+  this.select = $scope.select = function selectPane(pane) {
     angular.forEach(panes, function(pane) {
       pane.selected = false;
     });
@@ -35,7 +35,7 @@ angular.module('ui.bootstrap.tabs', [])
     replace: true
   };
 })
-.directive('pane', function() {
+.directive('pane', ['$parse', function($parse) {
   return {
     require: '^tabs',
     restrict: 'EA',
@@ -44,6 +44,26 @@ angular.module('ui.bootstrap.tabs', [])
       heading:'@'
     },
     link: function(scope, element, attrs, tabsCtrl) {
+      var getSelected, setSelected;
+      scope.selected = false;
+      if (attrs.active) {
+        getSelected = $parse(attrs.active);
+        setSelected = getSelected.assign;
+        scope.$watch(
+          function watchSelected() {return getSelected(scope.$parent);},
+          function updateSelected(value) {scope.selected = value;}
+        );
+        scope.selected = getSelected ? getSelected(scope.$parent) : false;
+      }
+      scope.$watch('selected', function(selected) {
+        if(selected) {
+          tabsCtrl.select(scope);
+        }
+        if(setSelected) {
+          setSelected(scope.$parent, selected);
+        }
+      });
+
       tabsCtrl.addPane(scope);
       scope.$on('$destroy', function() {
         tabsCtrl.removePane(scope);
@@ -52,4 +72,4 @@ angular.module('ui.bootstrap.tabs', [])
     templateUrl: 'template/tabs/pane.html',
     replace: true
   };
-});
+}]);

src/tabs/test/tabsSpec.js

@@ -88,6 +88,60 @@ describe('tabs', function() {
 });
 
 
+describe('remote selection', function() {
+  var elm, scope;
+
+  // load the tabs code
+  beforeEach(module('ui.bootstrap.tabs'));
+
+  // load the templates
+  beforeEach(module('template/tabs/tabs.html', 'template/tabs/pane.html'));
+
+  beforeEach(inject(function($rootScope, $compile) {
+    // we might move this tpl into an html file as well...
+    elm = angular.element(
+      '<div>' +
+        '<tabs>' +
+          '<pane ng-repeat="pane in panes" active="pane.active" heading="pane.title">' +
+            '{{pane.content}}}' +
+          '</pane>' +
+        '</tabs>' +
+      '</div>'
+    );
+    scope = $rootScope;
+    scope.panes = [
+      { title:"Dynamic Title 1", content:"Dynamic content 1", active:true},
+      { title:"Dynamic Title 2", content:"Dynamic content 2" }
+    ];
+
+    $compile(elm)(scope);
+    scope.$digest();
+  }));
+
+  it('should handle select attribute when select/deselect', function() {
+    var titles = elm.find('ul.nav-tabs li');
+    scope.$apply('panes[1].active=true');
+    expect(titles.eq(1)).toHaveClass('active');
+
+    titles.eq(0).find('a').click();
+    
+    expect(scope.panes[1].active).toBe(false);
+  });
+
+  it('should select last active tab when multiple panes evaluate to active=true', function() {
+    var titles = elm.find('ul.nav-tabs li');
+    scope.$apply('panes[0].active=true;panes[1].active=true');
+    expect(titles.eq(1)).toHaveClass('active');
+  });
+
+  it('should deselect all panes when all atrributes set to false', function() {
+    var titles = elm.find('ul.nav-tabs li');
+    scope.$apply('panes[0].active=false');
+    expect(titles.eq(0)).not.toHaveClass('active');
+    expect(titles.eq(1)).not.toHaveClass('active');
+  });
+});
+
 describe('tabs controller', function() {
   var scope, ctrl;