feat(tab): add template-url support

- Adds support for `template-url` for tabset and tab directives

Closes #5405
Closes #5443

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.
   <small class="badge">$</small> -
   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.

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: '@',

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', '<div>baz</div>');
+
+      elm = $compile('<uib-tabset template-url="foo/bar.html"></uib-tabset>')(scope);
+      scope.$digest();
+
+      expect(elm.html()).toBe('baz');
+    });
+  });
+
   describe('uib-tab', function() {
     var $compile, $templateCache;
 
@@ -216,6 +234,17 @@ describe('tabs', function() {
 
       expect(tab.text().trim()).toBe('foo');
     });
+
+    it('should support custom templates', function() {
+      $templateCache.put('foo/bar.html', '<li>baz</li>');
+
+      elm = $compile('<uib-tabset><uib-tab template-url="foo/bar.html"></uib-tab></uib-tabset>')(scope);
+      scope.$digest();
+
+      var tabTitle = titles().eq(0);
+
+      expect(tabTitle.html()).toBe('baz');
+    });
   });
 
   describe('ng-repeat', function() {