diff --git a/src/tabs/docs/readme.md b/src/tabs/docs/readme.md index 66d799c1fb..7c542b92bd 100644 --- a/src/tabs/docs/readme.md +++ b/src/tabs/docs/readme.md @@ -12,6 +12,10 @@ AngularJS version of the tabs directive. _(Default: `false`)_ - Whether tabs fill the container and have a consistent width. + * `template-url` + _(Default: `uib/template/tabs/tabset.html`)_ - + A URL representing the location of a template to use for the main component. + * `type` _(Defaults: `tabs`)_ - Navigation type. Possible values are 'tabs' and 'pills'. @@ -43,6 +47,10 @@ AngularJS version of the tabs directive. $ - An optional expression called when tab is activated. +* `template-url` + _(Default: `uib/template/tabs/tab.html`)_ - + A URL representing the location of a template to use for the tab heading. + ### Tabset heading Instead of the `heading` attribute on the `uib-tabset`, you can use an `uib-tab-heading` element inside a tabset that will be used as the tabset's header. There you can use HTML as well. diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index 6cbce5818f..8fe543c6a4 100644 --- a/src/tabs/tabs.js +++ b/src/tabs/tabs.js @@ -93,7 +93,9 @@ angular.module('ui.bootstrap.tabs', []) }, controller: 'UibTabsetController', controllerAs: 'tabset', - templateUrl: 'uib/template/tabs/tabset.html', + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'uib/template/tabs/tabset.html'; + }, link: function(scope, element, attrs) { scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false; @@ -107,7 +109,9 @@ angular.module('ui.bootstrap.tabs', []) return { require: '^uibTabset', replace: true, - templateUrl: 'uib/template/tabs/tab.html', + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'uib/template/tabs/tab.html'; + }, transclude: true, scope: { heading: '@', diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js index 544b442706..11476f3518 100644 --- a/src/tabs/test/tabs.spec.js +++ b/src/tabs/test/tabs.spec.js @@ -191,6 +191,24 @@ describe('tabs', function() { }); }); + describe('custom template', function() { + var $compile, $templateCache; + beforeEach(inject(function($rootScope, _$compile_, _$templateCache_) { + scope = $rootScope; + $compile = _$compile_; + $templateCache = _$templateCache_; + })); + + it('should support custom templates', function() { + $templateCache.put('foo/bar.html', '