|
1 | 1 | angular.module('ui.bootstrap.tabs', []) |
2 | | -.controller('TabsController', ['$scope', '$element', function($scope, $element) { |
3 | | - var panes = $scope.panes = []; |
4 | | - |
5 | | - this.select = $scope.select = function selectPane(pane) { |
6 | | - angular.forEach(panes, function(pane) { |
7 | | - pane.selected = false; |
8 | | - }); |
9 | | - pane.selected = true; |
| 2 | + |
| 3 | +.directive('tabs', function() { |
| 4 | + return function() { |
| 5 | + throw new Error("The `tabs` directive is deprecated, please migrate to `tabset`. Instructions can be found at http://github.com/angular-ui/bootstrap/tree/master/CHANGELOG.md"); |
10 | 6 | }; |
| 7 | +}) |
11 | 8 |
|
12 | | - this.addPane = function addPane(pane) { |
13 | | - if (!panes.length) { |
14 | | - $scope.select(pane); |
| 9 | +.controller('TabsetController', ['$scope', '$element', |
| 10 | +function TabsetCtrl($scope, $element) { |
| 11 | + var ctrl = this, |
| 12 | + tabs = ctrl.tabs = []; |
| 13 | + |
| 14 | + ctrl.select = function(tab) { |
| 15 | + angular.forEach(tabs, ctrl.deselect); |
| 16 | + tab.active = true; |
| 17 | + ctrl.activeTab = tab; |
| 18 | + }; |
| 19 | + |
| 20 | + ctrl.deselect = function(tab) { |
| 21 | + if (ctrl.activeTab === tab) { |
| 22 | + ctrl.activeTab = null; |
15 | 23 | } |
16 | | - panes.push(pane); |
| 24 | + tab.active = false; |
17 | 25 | }; |
18 | 26 |
|
19 | | - this.removePane = function removePane(pane) { |
20 | | - var index = panes.indexOf(pane); |
21 | | - panes.splice(index, 1); |
22 | | - //Select a new pane if removed pane was selected |
23 | | - if (pane.selected && panes.length > 0) { |
24 | | - $scope.select(panes[index < panes.length ? index : index-1]); |
| 27 | + |
| 28 | + ctrl.addTab = function addTab(tab) { |
| 29 | + tabs.push(tab); |
| 30 | + if (tabs.length == 1) { |
| 31 | + ctrl.select(tab); |
25 | 32 | } |
26 | 33 | }; |
| 34 | + |
| 35 | + ctrl.removeTab = function removeTab(tab) { |
| 36 | + var index = tabs.indexOf(tab); |
| 37 | + //Select a new tab if the tab to be removed is selected |
| 38 | + if (tab.active && tabs.length > 1) { |
| 39 | + //If this is the last tab, select the previous tab. else, the next tab. |
| 40 | + var newActiveIndex = index == tabs.length - 1 ? index - 1 : index + 1; |
| 41 | + ctrl.select(tabs[newActiveIndex]); |
| 42 | + } |
| 43 | + tabs.splice(index, 1); |
| 44 | + }; |
27 | 45 | }]) |
28 | | -.directive('tabs', function() { |
| 46 | + |
| 47 | +.directive('tabset', function() { |
29 | 48 | return { |
30 | 49 | restrict: 'EA', |
31 | 50 | transclude: true, |
32 | | - scope: {}, |
33 | | - controller: 'TabsController', |
34 | | - templateUrl: 'template/tabs/tabs.html', |
35 | | - replace: true |
| 51 | + controller: 'TabsetController', |
| 52 | + templateUrl: 'template/tabs/tabset.html' |
36 | 53 | }; |
37 | 54 | }) |
38 | | -.directive('pane', ['$parse', function($parse) { |
| 55 | + |
| 56 | +.directive('tab', ['$parse', '$http', '$templateCache', '$compile', |
| 57 | +function($parse, $http, $templateCache, $compile) { |
39 | 58 | return { |
40 | | - require: '^tabs', |
| 59 | + require: '^tabset', |
41 | 60 | restrict: 'EA', |
| 61 | + replace: true, |
| 62 | + templateUrl: 'template/tabs/tab.html', |
42 | 63 | transclude: true, |
43 | | - scope:{ |
44 | | - heading:'@' |
| 64 | + scope: { |
| 65 | + heading: '@', |
| 66 | + onSelect: '&select' //This callback is called in contentHeadingTransclude |
| 67 | + //once it inserts the tab's content into the dom |
45 | 68 | }, |
46 | | - link: function(scope, element, attrs, tabsCtrl) { |
47 | | - var getSelected, setSelected; |
48 | | - scope.selected = false; |
49 | | - if (attrs.active) { |
50 | | - getSelected = $parse(attrs.active); |
51 | | - setSelected = getSelected.assign; |
52 | | - scope.$watch( |
53 | | - function watchSelected() {return getSelected(scope.$parent);}, |
54 | | - function updateSelected(value) {scope.selected = value;} |
55 | | - ); |
56 | | - scope.selected = getSelected ? getSelected(scope.$parent) : false; |
57 | | - } |
58 | | - scope.$watch('selected', function(selected) { |
59 | | - if(selected) { |
60 | | - tabsCtrl.select(scope); |
| 69 | + controller: ['$scope', function TabCtrl($scope) { |
| 70 | + this.getHeadingElement = function() { |
| 71 | + return $scope.headingElement; |
| 72 | + }; |
| 73 | + }], |
| 74 | + compile: function(elm, attrs, transclude) { |
| 75 | + return function postLink(scope, elm, attrs, tabsetCtrl) { |
| 76 | + var getActive, setActive; |
| 77 | + scope.active = false; // default value |
| 78 | + if (attrs.active) { |
| 79 | + getActive = $parse(attrs.active); |
| 80 | + setActive = getActive.assign; |
| 81 | + scope.$parent.$watch(getActive, function updateActive(value) { |
| 82 | + scope.active = !!value; |
| 83 | + }); |
| 84 | + } else { |
| 85 | + setActive = getActive = angular.noop; |
61 | 86 | } |
62 | | - if(setSelected) { |
63 | | - setSelected(scope.$parent, selected); |
| 87 | + |
| 88 | + scope.$watch('active', function(active) { |
| 89 | + setActive(scope.$parent, active); |
| 90 | + if (active) { |
| 91 | + tabsetCtrl.select(scope); |
| 92 | + } else { |
| 93 | + tabsetCtrl.deselect(scope); |
| 94 | + } |
| 95 | + }); |
| 96 | + |
| 97 | + scope.select = function() { |
| 98 | + scope.active = true; |
| 99 | + }; |
| 100 | + |
| 101 | + tabsetCtrl.addTab(scope); |
| 102 | + scope.$on('$destroy', function() { |
| 103 | + tabsetCtrl.removeTab(scope); |
| 104 | + }); |
| 105 | + //If the tabset sets this tab to active, set the parent scope's active |
| 106 | + //binding too. We do this so the watch for the parent's initial active |
| 107 | + //value won't overwrite what is initially set by the tabset |
| 108 | + if (scope.active) { |
| 109 | + setActive(scope.$parent, true); |
| 110 | + } |
| 111 | + |
| 112 | + //Transclude the collection of sibling elements. Use forEach to find |
| 113 | + //the heading if it exists. We don't use a directive for tab-heading |
| 114 | + //because it is problematic. Discussion @ http://git.io/MSNPwQ |
| 115 | + transclude(scope.$parent, function(clone) { |
| 116 | + //Look at every element in the clone collection. If it's tab-heading, |
| 117 | + //mark it as that. If it's not tab-heading, mark it as tab contents |
| 118 | + var contents = [], heading; |
| 119 | + angular.forEach(clone, function(el) { |
| 120 | + //See if it's a tab-heading attr or element directive |
| 121 | + //First make sure it's a normal element, one that has a tagName |
| 122 | + if (el.tagName && |
| 123 | + (el.hasAttribute("tab-heading") || |
| 124 | + el.hasAttribute("data-tab-heading") || |
| 125 | + el.tagName.toLowerCase() == "tab-heading" || |
| 126 | + el.tagName.toLowerCase() == "data-tab-heading" |
| 127 | + )) { |
| 128 | + heading = el; |
| 129 | + } else { |
| 130 | + contents.push(el); |
| 131 | + } |
| 132 | + }); |
| 133 | + //Share what we found on the scope, so our tabHeadingTransclude and |
| 134 | + //tabContentTransclude directives can find out what the heading and |
| 135 | + //contents are. |
| 136 | + if (heading) { |
| 137 | + scope.headingElement = angular.element(heading); |
| 138 | + } |
| 139 | + scope.contentElement = angular.element(contents); |
| 140 | + }); |
| 141 | + }; |
| 142 | + } |
| 143 | + }; |
| 144 | +}]) |
| 145 | + |
| 146 | +.directive('tabHeadingTransclude', [function() { |
| 147 | + return { |
| 148 | + restrict: 'A', |
| 149 | + require: '^tab', |
| 150 | + link: function(scope, elm, attrs, tabCtrl) { |
| 151 | + scope.$watch(function getHeadingElement() { |
| 152 | + return tabCtrl.getHeadingElement(); |
| 153 | + }, function updateHeadingElement(heading) { |
| 154 | + if (heading) { |
| 155 | + elm.html(''); |
| 156 | + elm.append(heading); |
64 | 157 | } |
65 | 158 | }); |
| 159 | + } |
| 160 | + }; |
| 161 | +}]) |
66 | 162 |
|
67 | | - tabsCtrl.addPane(scope); |
68 | | - scope.$on('$destroy', function() { |
69 | | - tabsCtrl.removePane(scope); |
| 163 | +.directive('tabContentTransclude', [function() { |
| 164 | + return { |
| 165 | + restrict: 'A', |
| 166 | + require: '^tabset', |
| 167 | + link: function(scope, elm, attrs, tabsetCtrl) { |
| 168 | + scope.$watch(function getActiveTab() { |
| 169 | + return tabsetCtrl.activeTab; |
| 170 | + }, function updateActiveTab(activeTab, previousActiveTab) { |
| 171 | + if (previousActiveTab) { |
| 172 | + previousActiveTab.contentElement.remove(); |
| 173 | + } |
| 174 | + if (activeTab) { |
| 175 | + elm.append(activeTab.contentElement); |
| 176 | + //We call onSelect here so we can be sure it is called after the |
| 177 | + //tab's element is inserted into the DOM, and all values will be |
| 178 | + //up-to-date |
| 179 | + activeTab.onSelect(); |
| 180 | + } |
70 | 181 | }); |
71 | | - }, |
72 | | - templateUrl: 'template/tabs/pane.html', |
73 | | - replace: true |
| 182 | + } |
74 | 183 | }; |
75 | | -}]); |
| 184 | +}]) |
| 185 | + |
| 186 | +; |
| 187 | + |
0 commit comments