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 angular-ui#1611. @sudhakar mentions a similar need for this in angular-ui#105. Usage <tabset> <tab ng-repeat="tab in tabs"> <tabset template-url="custom_tab_template"> <tab ng-repeat="innerTab in tab.tabs"> <span class="inner-tab-content">{{ innerTab.content }}</span> </tab> </tabset> </tab> </tabset>
jdewit · Jan 30, 2014 · 472cb6f · 472cb6f
1 parent 3704db9
commit 472cb6f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git 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
@@ -780,5 +780,55 @@ 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();
+      scope.tabs = [
+        {
+          tabs: [
+          {
+            content: 'tab1a'
+          },
+          {
+            content: 'tab2a'
+          }
+          ],
+          content: 'tab1'
+        }
+      ];
+      elm = $compile([
+        '<div>',
+        '  <tabset>',
+        '    <tab ng-repeat="tab in tabs">',
+        '      <tabset template-url="custom_tab_template">',
+        '        <tab ng-repeat="innerTab in tab.tabs">',
+        '          <span class="inner-tab-content">{{ innerTab.content }}</span>',
+        '        </tab>',
+        '      </tabset>',
+        '      <span class="outer-tab-content">{{ tab.content }}</span>',
+        '    </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');
+    }));
   });
 });