From 3e4604995586248efdfb6dae8a045c0e999628a6 Mon Sep 17 00:00:00 2001 From: Chris Chua Date: Thu, 5 Dec 2013 13:21:55 -0800 Subject: [PATCH 1/2] chore(tabs): Add tests for nested tabs Relates to #783 --- src/tabs/test/tabs.spec.js | 109 +++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js index 61215db39b..b428fe9b26 100644 --- a/src/tabs/test/tabs.spec.js +++ b/src/tabs/test/tabs.spec.js @@ -647,4 +647,113 @@ describe('tabs', function() { expect(contents.eq(2).text().trim()).toEqual('3,4,5,'); })); }); + + //https://github.com/angular-ui/bootstrap/issues/783 + describe('nested tabs', function() { + var elm; + it('should render without errors', inject(function($compile, $rootScope) { + var scope = $rootScope.$new(); + elm = $compile([ + '
', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '
' + ].join('\n'))(scope); + scope.$apply(); + + // 1 outside tabset, 2 nested tabsets + expect(elm.find('.tabbable').length).toEqual(3); + })); + + it('should render with the correct scopes', inject(function($compile, $rootScope) { + var scope = $rootScope.$new(); + scope.tab1Text = 'abc'; + scope.tab1aText = '123'; + scope.tab1aHead = '123'; + scope.tab2aaText = '456'; + elm = $compile([ + '
', + ' ', + ' ', + ' ', + ' ', + ' {{ tab1aText }}', + ' ', + ' ', + ' {{ tab1Text }}', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' {{ tab2aaText }}', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '
' + ].join('\n'))(scope); + scope.$apply(); + + var outsideTabset = elm.find('.tabbable').eq(0); + var nestedTabset = outsideTabset.find('.tabbable'); + + expect(elm.find('.tabbable').length).toEqual(4); + expect(outsideTabset.find('.tab-pane').eq(0).find('.tab-1').text().trim()).toEqual(scope.tab1Text); + expect(nestedTabset.find('.tab-pane').eq(0).text().trim()).toEqual(scope.tab1aText); + expect(nestedTabset.find('ul.nav-tabs li').eq(0).text().trim()).toEqual(scope.tab1aHead); + expect(nestedTabset.eq(2).find('.tab-pane').eq(0).find('.tab-2aa').text().trim()).toEqual(scope.tab2aaText); + })); + + it('ng-repeat works with nested tabs', inject(function($compile, $rootScope) { + var scope = $rootScope.$new(); + scope.tabs = [ + { + tabs: [ + { + content: 'tab1a' + }, + { + content: 'tab2a' + } + ], + content: 'tab1' + } + ]; + elm = $compile([ + '
', + ' ', + ' ', + ' ', + ' ', + ' {{ innerTab.content }}', + ' ', + ' ', + ' {{ tab.content }}', + ' ', + ' ', + '
' + ].join('\n'))(scope); + scope.$apply(); + + expect(elm.find('.inner-tab-content').eq(0).text().trim()).toEqual(scope.tabs[0].tabs[0].content); + expect(elm.find('.inner-tab-content').eq(1).text().trim()).toEqual(scope.tabs[0].tabs[1].content); + expect(elm.find('.outer-tab-content').eq(0).text().trim()).toEqual(scope.tabs[0].content); + })); + }); }); From 4235fe39711a9a29d9e780b4b294561cfdaa9413 Mon Sep 17 00:00:00 2001 From: Chris Chua Date: Fri, 13 Dec 2013 14:19:23 -0800 Subject: [PATCH 2/2] fix(tabs): make nested tabs work This reverts commit 220e7b60124105aca25e57c3f01a22e12fa77cc2. Revert the capability to set the tab direction. This is no longer a feature in Bootstrap 3 and breaks nested tabs. Closes #783 Relates to #659 --- src/tabs/tabs.js | 34 +++------------------ src/tabs/test/tabs.spec.js | 52 +------------------------------- template/tabs/tabset-titles.html | 2 -- template/tabs/tabset.html | 6 ++-- 4 files changed, 8 insertions(+), 86 deletions(-) delete mode 100644 template/tabs/tabset-titles.html diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index dbda75ca29..e65c6f8df9 100644 --- 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 @@ -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 index b428fe9b26..20cee9b62d 100644 --- 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('')(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('')(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('')(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('')(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 deleted file mode 100644 index 560e0f743f..0000000000 --- a/template/tabs/tabset-titles.html +++ /dev/null @@ -1,2 +0,0 @@ -
    -
diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html index 5e9798b2c8..ffe289f882 100644 --- a/template/tabs/tabset.html +++ b/template/tabs/tabset.html @@ -1,6 +1,7 @@ -
-
+
+
    +
-