diff --git a/src/tabs/docs/demo.html b/src/tabs/docs/demo.html
index 8f2dc57aca..a8e4065487 100644
--- a/src/tabs/docs/demo.html
+++ b/src/tabs/docs/demo.html
@@ -11,7 +11,7 @@
Static content
-
+
{{tab.content}}
diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md
index e33afdec5c..e43fe2c5c8 100644
--- a/src/tabs/docs/readme.md
+++ b/src/tabs/docs/readme.md
@@ -26,9 +26,10 @@ AngularJS version of the tabs directive.
_(Defaults: false)_ :
Whether tab is currently selected.
- * `disabled`
+ * `disable`
_(Defaults: false)_ :
Whether tab is clickable and can be activated.
+ Note that this was previously the `disabled` attribute, which is now deprecated.
* `select()`
_(Defaults: null)_ :
@@ -36,4 +37,4 @@ AngularJS version of the tabs directive.
* `deselect()`
_(Defaults: null)_ :
- An optional expression called when tab is deactivated.
\ No newline at end of file
+ An optional expression called when tab is deactivated.
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index b64a940891..4fbcca06ee 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -182,7 +182,7 @@ angular.module('ui.bootstrap.tabs', [])
*/
-.directive('tab', ['$parse', function($parse) {
+.directive('tab', ['$parse', '$log', function($parse, $log) {
return {
require: '^tabset',
restrict: 'EA',
@@ -208,7 +208,18 @@ angular.module('ui.bootstrap.tabs', [])
});
scope.disabled = false;
+ if ( attrs.disable ) {
+ scope.$parent.$watch($parse(attrs.disable), function(value) {
+ scope.disabled = !! value;
+ });
+ }
+
+ // Deprecation support of "disabled" parameter
+ // fix(tab): IE9 disabled attr renders grey text on enabled tab #2677
+ // This code is duplicated from the lines above to make it easy to remove once
+ // the feature has been completely deprecated
if ( attrs.disabled ) {
+ $log.warn('Use of "disabled" attribute has been deprecated, please use "disable"');
scope.$parent.$watch($parse(attrs.disabled), function(value) {
scope.disabled = !! value;
});
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index d2b9b2ffc9..8d91ecbee7 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -566,15 +566,15 @@ describe('tabs', function() {
}));
});
- describe('disabled', function() {
+ describe('disable', function() {
beforeEach(inject(function($compile, $rootScope) {
scope = $rootScope.$new();
- function makeTab(disabled) {
+ function makeTab(disable) {
return {
active: false,
select: jasmine.createSpy(),
- disabled: disabled
+ disable: disable
};
}
scope.tabs = [
@@ -582,7 +582,7 @@ describe('tabs', function() {
];
elm = $compile([
'',
- ' ',
+ ' ',
' heading {{index}}',
' content {{$index}}',
' ',
@@ -596,7 +596,7 @@ describe('tabs', function() {
angular.forEach(scope.tabs, function(tab, i) {
if (activeTab === tab) {
expect(tab.active).toBe(true);
- expect(tab.select.calls.count()).toBe( (tab.disabled) ? 0 : 1 );
+ expect(tab.select.calls.count()).toBe( (tab.disable) ? 0 : 1 );
expect(_titles.eq(i)).toHaveClass('active');
expect(contents().eq(i).text().trim()).toBe('content ' + i);
expect(contents().eq(i)).toHaveClass('active');
@@ -617,11 +617,11 @@ describe('tabs', function() {
it('should toggle between states', function() {
expect(titles().eq(3)).toHaveClass('disabled');
- scope.$apply('tabs[3].disabled = false');
+ scope.$apply('tabs[3].disable = false');
expect(titles().eq(3)).not.toHaveClass('disabled');
expect(titles().eq(2)).not.toHaveClass('disabled');
- scope.$apply('tabs[2].disabled = true');
+ scope.$apply('tabs[2].disable = true');
expect(titles().eq(2)).toHaveClass('disabled');
});
});