feat(tabs): add the ability to set the direction of the tabs

src/tabs/tabs.js

@@ -77,12 +77,19 @@ function TabsetCtrl($scope, $element) {
     restrict: 'EA',
     transclude: true,
     replace: true,
+    require: '^tabset',
     scope: {},
     controller: 'TabsetController',
     templateUrl: 'template/tabs/tabset.html',
-    link: function(scope, element, attrs) {
-      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
-      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
+    compile: function(elm, attrs, transclude) {
+      return function(scope, element, attrs, tabsetCtrl) {
+        scope.vertical = angular.isDefined(attrs.vertical) ? scope.$eval(attrs.vertical) : false;
+        scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
+        scope.direction = angular.isDefined(attrs.direction) ? scope.$parent.$eval(attrs.direction) : 'top';
+        scope.tabsAbove = (scope.direction != 'below');
+        tabsetCtrl.$scope = scope;
+        tabsetCtrl.$transcludeFn = transclude;
+      };
     }
   };
 })
@@ -280,5 +287,24 @@ function($parse, $http, $templateCache, $compile) {
   }
 }])
 
+.directive('tabsetTitles', function($http) {
+  return {
+    restrict: 'A',
+    require: '^tabset',
+    templateUrl: 'template/tabs/tabset-titles.html',
+    replace: true,
+    link: function(scope, elm, attrs, tabsetCtrl) {
+      if (!scope.$eval(attrs.tabsetTitles)) {
+        elm.remove();
+      } else {
+        //now that tabs location has been decided, transclude the tab titles in
+        tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function(node) {
+          elm.append(node);
+        });
+      }
+    }
+  };
+})
+
 ;
 

src/tabs/test/tabsSpec.js

@@ -1,5 +1,5 @@
 describe('tabs', function() {
-  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html'));
+  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html', 'template/tabs/tabset-titles.html'));
 
   var elm, scope;
   function titles() {
@@ -483,6 +483,56 @@ describe('tabs', function() {
     });
   });
 
+  describe('direction', function() {
+    it('should not have `tab-left`, `tab-right` nor `tabs-below` classes if the direction is undefined', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = undefined;
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-left` direction class if the direction is "left"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'left';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-right direction class if the direction is "right"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'right';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).toHaveClass('tabs-right');
+      expect(elm).not.toHaveClass('tabs-below');
+      expect(elm.find('.nav + .tab-content').length).toBe(1);
+    }));
+
+    it('should only have the `tab-below direction class if the direction is "below"', inject(function($compile, $rootScope) {
+      scope = $rootScope.$new();
+      scope.direction = 'below';
+
+      elm = $compile('<tabset direction="direction"></tabset>')(scope);
+      scope.$apply();
+      expect(elm).not.toHaveClass('tabs-left');
+      expect(elm).not.toHaveClass('tabs-right');
+      expect(elm).toHaveClass('tabs-below');
+      expect(elm.find('.tab-content + .nav').length).toBe(1);
+    }));
+  });
+
   //https://github.com/angular-ui/bootstrap/issues/524
   describe('child compilation', function() {
 

template/tabs/tabset-titles.html

@@ -0,0 +1,2 @@
+<ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}">
+</ul>

template/tabs/tabset.html

@@ -1,12 +1,12 @@
 
-<div class="tabbable">
-  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
-  </ul>
+<div class="tabbable" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
+  <div tabset-titles="tabsAbove"></div>
   <div class="tab-content">
     <div class="tab-pane" 
          ng-repeat="tab in tabs" 
          ng-class="{active: tab.active}"
          tab-content-transclude="tab">
     </div>
   </div>
+  <div tabset-titles="!tabsAbove"></div>
 </div>