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'); }); });