From c3d83a91f753ca82e30685fbdfeb48bf86e8a607 Mon Sep 17 00:00:00 2001
From: Joris de Wit <joris.w.dewit@gmail.com>
Date: Thu, 30 Jan 2014 10:51:45 -0800
Subject: [PATCH] feat(tab): make templateUrl configurable

I need the ability to have different markup for some tabs on a page
by page basis. Injecting templates with the script tag on each page
is getting ugly.

This topic was recently brought up again in #1611.

@sudhakar mentions a similar need for this in #105.

Usage

    <tabset template-url="custom_tab_template">
      <tab heading="Stuff">
        Some stuff here
      </tab>
    </tabset>
---
 src/tabs/tabs.js           |  2 +-
 src/tabs/test/tabs.spec.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index 5881bb8cee..5f0b2e4344 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -86,7 +86,7 @@ angular.module('ui.bootstrap.tabs', [])
       type: '@'
     },
     controller: 'TabsetController',
-    templateUrl: 'template/tabs/tabset.html',
+    templateUrl: function(element, attr) { return attr.templateUrl ? attr.templateUrl : 'template/tabs/tabset.html'; },
     link: function(scope, element, attrs) {
       scope.vertical = angular.isDefined(attrs.vertical) ? scope.$parent.$eval(attrs.vertical) : false;
       scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false;
diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js
index 0e94fb64cb..7876d57657 100644
--- a/src/tabs/test/tabs.spec.js
+++ b/src/tabs/test/tabs.spec.js
@@ -780,5 +780,38 @@ describe('tabs', function() {
       expect(elm.find('.inner-tab-content').eq(1).text().trim()).toEqual(scope.tabs[0].tabs[1].content);
       expect(elm.find('.outer-tab-content').eq(0).text().trim()).toEqual(scope.tabs[0].content);
     }));
+
+    it('template path should be configurable', inject(function($compile, $rootScope, $templateCache) {
+      $templateCache.put('custom_tab_template',
+        '<div class="tabbable">' +
+          '<div class="custom-markup">' +
+            '<span>Some custom markup</span>' +
+            '<ul class="nav nav-{{type || \'tabs\'}}" ng-class="{\'nav-stacked\': vertical, \'nav-justified\': justified}" ng-transclude></ul>' +
+          '</div>' +
+          '<div class="tab-content">' +
+            '<div class="tab-pane"' +
+                 'ng-repeat="tab in tabs"' +
+                 'ng-class="{active: tab.active}"' +
+                 'tab-content-transclude="tab">' +
+            '</div>' +
+          '</div>' +
+        '</div>');
+
+      var scope = $rootScope.$new();
+
+      elm = $compile([
+        '<div>',
+        '  <tabset template-url="custom_tab_template">',
+        '    <tab heading="Stuff">',
+        '      Some stuff',
+        '    </tab>',
+        '  </tabset>',
+        '</div>'
+      ].join('\n'))(scope);
+      scope.$apply();
+
+      expect(elm.find('.custom-markup').length).toEqual(1);
+      expect(elm.find('.custom-markup span').text()).toEqual('Some custom markup');
+    }));
   });
 });