From 6192336408bfbd78e6467b8acf2cafd212f7348d Mon Sep 17 00:00:00 2001 From: MortadaAK Date: Sun, 15 Sep 2013 11:01:37 +0300 Subject: [PATCH 1/2] Fix the tabs modal to accept nested tabset In this fix the valiable ctrl of TabsetCtrl has been changed to the scope level to choose which tab to select from. In tabsetTitles directive, we need to let the parent tabset rendered before the nested one. In the template, tabsAbove needs to be set or it will always will be down. --- src/tabs/docs/demo.html | 10 ++++++++++ src/tabs/docs/demo.js | 27 +++++++++++++++++---------- src/tabs/tabs.js | 32 +++++++++++++++++++++----------- template/tabs/tabset.html | 4 ++-- 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html index 9723cc293d..f6e8e3cc9d 100644 --- a/src/tabs/docs/demo.html +++ b/src/tabs/docs/demo.html @@ -10,6 +10,16 @@ Static content {{tab.content}} + + + {{nestedTab.content}} + + + {{deepNestedTab.content}} + + + + diff --git a/src/tabs/docs/demo.js b/src/tabs/docs/demo.js index da92adab20..0771be30bf 100644 --- a/src/tabs/docs/demo.js +++ b/src/tabs/docs/demo.js @@ -1,14 +1,21 @@ var TabsDemoCtrl = function ($scope) { - $scope.tabs = [ - { title:"Dynamic Title 1", content:"Dynamic content 1" }, - { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true } - ]; + $scope.tabs = [ + { title: "Dynamic Title 1", content: "Dynamic content 1" }, + { title: "Dynamic Title 2", content: "Dynamic content 2", disabled: true }, + { title: "Dynamic Title 3", content: "Dynamic content 3", nestedTabs: [ + { title: "Nested Dynamic Title 1", content: "Nested Dynamic content 1" }, + { title: "Nested Dynamic Title 2", content: "Nested Dynamic content 2", nestedTabs: [ + { title: "Deep Nested Dynamic Title 1", content: "Deep Nested Dynamic content 1" }, + { title: "Deep Nested Dynamic Title 2", content: "Deep Nested Dynamic content 2" } + ]} + ]} + ]; - $scope.alertMe = function() { - setTimeout(function() { - alert("You've selected the alert tab!"); - }); - }; + $scope.alertMe = function () { + setTimeout(function () { + alert("You've selected the alert tab!"); + }); + }; - $scope.navType = 'pills'; + $scope.navType = 'pills'; }; diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index aaf3f40d57..e36c4d9744 100644 --- a/src/tabs/tabs.js +++ b/src/tabs/tabs.js @@ -17,8 +17,8 @@ angular.module('ui.bootstrap.tabs', []) .controller('TabsetController', ['$scope', '$element', function TabsetCtrl($scope, $element) { - - var ctrl = this, + $scope.ctrl = this; + var ctrl = $scope.ctrl, tabs = ctrl.tabs = $scope.tabs = []; ctrl.select = function(tab) { @@ -299,21 +299,31 @@ function($parse, $http, $templateCache, $compile) { } }]) -.directive('tabsetTitles', ['$http', function($http) { +.directive('tabsetTitles', ['$http','$timeout', function($http,$timeout) { 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); - }); - } + function appendNode() { + tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function (node) { + elm.append(node); + }); + } + + if (!scope.$eval(attrs.tabsetTitles)) { + elm.remove(); + } else { + //now that tabs location has been decided, transclude the tab titles in + if(tabsetCtrl.$scope && tabsetCtrl.$scope.$parent){ + appendNode(); + } else { + $timeout(function () { + appendNode(); + }); + } + } } }; }]) diff --git a/template/tabs/tabset.html b/template/tabs/tabset.html index 5e9798b2c8..d39e4cc0d0 100644 --- a/template/tabs/tabset.html +++ b/template/tabs/tabset.html @@ -1,6 +1,6 @@
-
+
-
+
From 9c885a43c47825588ff702cb795b6b69d25fdc65 Mon Sep 17 00:00:00 2001 From: MortadaAK Date: Sun, 15 Sep 2013 11:40:01 +0300 Subject: [PATCH 2/2] Fix Progressbar template change bar to progress-bar --- src/progressbar/test/progressbar.spec.js | 58 ++++++++++++------------ template/progressbar/bar.html | 2 +- 2 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/progressbar/test/progressbar.spec.js b/src/progressbar/test/progressbar.spec.js index 70e20f0f03..9add0e8927 100644 --- a/src/progressbar/test/progressbar.spec.js +++ b/src/progressbar/test/progressbar.spec.js @@ -15,7 +15,7 @@ describe('progressbar directive with no binding', function () { it('contains one child element with "bar" css class', function() { expect(element.children().length).toBe(1); - expect(element.children().eq(0).hasClass('bar')).toBe(true); + expect(element.children().eq(0).hasClass('progress-bar')).toBe(true); }); it('has a "bar" element with expected width', function() { @@ -41,7 +41,7 @@ describe('progressbar directive with data-binding', function () { it('contains one child element with "bar" css class', function() { expect(element.children().length).toBe(1); - expect(element.children().eq(0).hasClass('bar')).toBe(true); + expect(element.children().eq(0).hasClass('progress-bar')).toBe(true); }); it('has a "bar" element with expected width', function() { @@ -53,7 +53,7 @@ describe('progressbar directive with data-binding', function () { $rootScope.$digest(); expect(element.children().length).toBe(1); expect(element.children().eq(0).css('width')).toBe('55%'); - expect(element.children().eq(0).hasClass('bar')).toBe(true); + expect(element.children().eq(0).hasClass('progress-bar')).toBe(true); $rootScope.percent += 11; $rootScope.$digest(); @@ -76,8 +76,8 @@ describe('progressbar directive with data-binding', function () { var barElement = element.children().eq(0); expect(barElement.css('width')).toBe('45%'); - expect(barElement.hasClass('bar')).toBe(true); - expect(barElement.hasClass('bar-warning')).toBe(true); + expect(barElement.hasClass('progress-bar')).toBe(true); + expect(barElement.hasClass('progress-bar-warning')).toBe(true); }); }); @@ -100,9 +100,9 @@ describe('stacked progressbar directive', function () { it('contains tree child elements with "bar" css class each', function() { expect(element.children().length).toBe(3); - expect(element.children().eq(0).hasClass('bar')).toBe(true); - expect(element.children().eq(1).hasClass('bar')).toBe(true); - expect(element.children().eq(2).hasClass('bar')).toBe(true); + expect(element.children().eq(0).hasClass('progress-bar')).toBe(true); + expect(element.children().eq(1).hasClass('progress-bar')).toBe(true); + expect(element.children().eq(2).hasClass('progress-bar')).toBe(true); }); it('has a elements with expected width', function() { @@ -144,18 +144,18 @@ describe('stacked progressbar directive', function () { barElement = element.children().eq(0); expect(barElement.css('width')).toBe('12%'); - expect(barElement.hasClass('bar')).toBe(true); - expect(barElement.hasClass('bar-danger')).toBe(false); + expect(barElement.hasClass('progress-bar')).toBe(true); + expect(barElement.hasClass('progress-bar-danger')).toBe(false); barElement = element.children().eq(1); expect(barElement.css('width')).toBe('29%'); - expect(barElement.hasClass('bar')).toBe(true); - expect(barElement.hasClass('bar-danger')).toBe(true); + expect(barElement.hasClass('progress-bar')).toBe(true); + expect(barElement.hasClass('progress-bar-danger')).toBe(true); barElement = element.children().eq(2); expect(barElement.css('width')).toBe('33%'); - expect(barElement.hasClass('bar')).toBe(true); - expect(barElement.hasClass('bar-danger')).toBe(false); + expect(barElement.hasClass('progress-bar')).toBe(true); + expect(barElement.hasClass('progress-bar-danger')).toBe(false); }); it('can handle mixed objects with custom classes', function() { @@ -174,23 +174,23 @@ describe('stacked progressbar directive', function () { barElement = element.children().eq(0); expect(barElement.css('width')).toBe('15%'); - expect(barElement.hasClass('bar-info')).toBe(true); + expect(barElement.hasClass('progress-bar-info')).toBe(true); barElement = element.children().eq(1); expect(barElement.css('width')).toBe('11%'); - expect(barElement.hasClass('bar-info')).toBe(false); + expect(barElement.hasClass('progress-bar-info')).toBe(false); barElement = element.children().eq(2); expect(barElement.css('width')).toBe('9%'); - expect(barElement.hasClass('bar-danger')).toBe(true); + expect(barElement.hasClass('progress-bar-danger')).toBe(true); barElement = element.children().eq(3); expect(barElement.css('width')).toBe('22%'); - expect(barElement.hasClass('bar-warning')).toBe(true); + expect(barElement.hasClass('progress-bar-warning')).toBe(true); barElement = element.children().eq(4); expect(barElement.css('width')).toBe('5%'); - expect(barElement.hasClass('bar-warning')).toBe(false); + expect(barElement.hasClass('progress-bar-warning')).toBe(false); }); }); @@ -259,7 +259,7 @@ describe('stacked progressbar directive with auto-types', function () { it('contains tree child elements with "bar" css class each', function() { expect(element.children().length).toBe(5); for (var i = 0; i < 5; i++) { - expect(element.children().eq(i).hasClass('bar')).toBe(true); + expect(element.children().eq(i).hasClass('progress-bar')).toBe(true); } }); @@ -275,7 +275,7 @@ describe('stacked progressbar directive with auto-types', function () { var stackedTypes = config.stackedTypes; for (var i = 0; i < stackedTypes.length; i++) { - expect(element.children().eq(i).hasClass('bar-' + stackedTypes[i])).toBe(true); + expect(element.children().eq(i).hasClass('progress-bar-' + stackedTypes[i])).toBe(true); } }); @@ -290,8 +290,8 @@ describe('stacked progressbar directive with auto-types', function () { var bar = element.children().eq(1); expect(bar.css('width')).toBe('18%'); - expect(bar.hasClass('bar-' + stackedTypes[1])).toBe(false); - expect(bar.hasClass('bar-something')).toBe(true); + expect(bar.hasClass('progress-bar-' + stackedTypes[1])).toBe(false); + expect(bar.hasClass('progress-bar-something')).toBe(true); }); @@ -306,8 +306,8 @@ describe('stacked progressbar directive with auto-types', function () { var bar = element.children().eq(1); expect(bar.css('width')).toBe('18%'); - expect(bar.hasClass('bar-' + stackedTypes[1])).toBe(false); - expect(bar.hasClass('bar-something')).toBe(true); + expect(bar.hasClass('progress-bar-' + stackedTypes[1])).toBe(false); + expect(bar.hasClass('progress-bar-something')).toBe(true); }); it('can bypass default configuration for stacked classes from attribute', function() { @@ -316,11 +316,11 @@ describe('stacked progressbar directive with auto-types', function () { var stackedTypes = config.stackedTypes; - expect(element.children().eq(0).hasClass('bar-danger')).toBe(true); - expect(element.children().eq(0).hasClass('bar-' + stackedTypes[0])).toBe(false); + expect(element.children().eq(0).hasClass('progress-bar-danger')).toBe(true); + expect(element.children().eq(0).hasClass('progress-bar-' + stackedTypes[0])).toBe(false); - expect(element.children().eq(1).hasClass('bar-warning')).toBe(true); - expect(element.children().eq(2).hasClass('bar-success')).toBe(true); + expect(element.children().eq(1).hasClass('progress-bar-warning')).toBe(true); + expect(element.children().eq(2).hasClass('progress-bar-success')).toBe(true); }); }); \ No newline at end of file diff --git a/template/progressbar/bar.html b/template/progressbar/bar.html index 09a5a6b010..fabe24ce43 100644 --- a/template/progressbar/bar.html +++ b/template/progressbar/bar.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file