fix(tabs): make nested tabs work

This reverts commit 220e7b6. Revert the capability to set the tab direction. This is no longer a feature in Bootstrap 3 and breaks nested tabs. Closes angular-ui#783 Relates to angular-ui#659
chrisirhc · Dec 13, 2013 · 4235fe3 · 4235fe3
1 parent 3e46049
commit 4235fe3
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 86 deletions.
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
@@ -54,8 +54,6 @@ angular.module('ui.bootstrap.tabs', [])
  * Tabset is the outer container for the tabs directive
  *
  * @param {boolean=} vertical Whether or not to use vertical styling for the tabs.
- * @param {string=} direction  What direction the tabs should be rendered. Available:
- * 'right', 'left', 'below'.
  *
  * @example
 <example module="ui.bootstrap">
@@ -77,19 +75,12 @@ angular.module('ui.bootstrap.tabs', [])
     restrict: 'EA',
     transclude: true,
     replace: true,
-    require: '^tabset',
     scope: {},
     controller: 'TabsetController',
     templateUrl: 'template/tabs/tabset.html',
-    compile: function(elm, attrs, transclude) {
-      return function(scope, element, attrs, tabsetCtrl) {
-        scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$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;
-      };
+    link: function(scope, element, attrs) {
+      scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
+      scope.type = angular.isDefined(attrs.type) ? scope.$parent.$eval(attrs.type) : 'tabs';
     }
   };
 })
@@ -294,21 +285,4 @@ angular.module('ui.bootstrap.tabs', [])
   }
 })
 
-.directive('tabsetTitles', function() {
-  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);
-        });
-      }
-    }
-  };
-});
+;
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
@@ -1,5 +1,5 @@
 describe('tabs', function() {
-  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html', 'template/tabs/tabset-titles.html'));
+  beforeEach(module('ui.bootstrap.tabs', 'template/tabs/tabset.html', 'template/tabs/tab.html'));
 
   var elm, scope;
   function titles() {
@@ -544,56 +544,6 @@ 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() {
 

diff --git a/template/tabs/tabset-titles.html b/template/tabs/tabset-titles.html
diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html
@@ -1,12 +1,12 @@
 
-<div class="tabbable" ng-class="{'tabs-right': direction == 'right', 'tabs-left': direction == 'left', 'tabs-below': direction == 'below'}">
-  <div tabset-titles="tabsAbove"></div>
+<div class="tabbable">
+  <ul class="nav {{type && 'nav-' + type}}" ng-class="{'nav-stacked': vertical}" ng-transclude>
+  </ul>
   <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>