1

Subject.

I'm going to use tabs module from this package (ui.bootstrap.tabs). I went through ui-bootstrap-tpls.js file and I saw the way the templates are defined now as

angular.module("template/tabs/tab.html", []).run(["$templateCache",             
function($templateCache) {

$templateCache.put("template/tabs/tab.html",
   "<li ng-class=\"{active: active, disabled: disabled}\">\n" +
   "  <a href ng-click=\"select()\" tab-heading-transclude>{{heading}}   
   /a>\n" +
   "</li>\n" +
   "");
}]);

So I imagined and it seemed logical to me that nested module dependency will help me to separate the templates. Something like 

angular.module("customtab.html", []).run(["$templateCache",             
    function($templateCache) {
        //Put custom tab code into tab.html 
        $templateCache.put("template/tabs/tab.html", "..");
    }]);

angular.module("customdirective",   ["customtab.html"]).directive("customDirective")
....

But once I checked this with angular 1.3.5 it appeared that $templateCache is created per application. So no matter what the module dependency tree is, the $templateCache will hold content of latest put call. And thus only one version of "template/tabs/tab.html" is possible per angular application.

Is there any other way to overcome this?

Edit 1: As suggested here Can you override specific templates in AngularUI Bootstrap? it is possible to use $provide service. But it suffers from the same issue. Let's say we have

angular.module("app.customDirective", ['ui.bootstrap.tabs',     'template/tabs/tab1.html', "template/tabs/tabset1.html"])
    .config(['$provide', function($provide){
        $provide.decorator('tabsetDirective', function($delegate) {
            var directive = $delegate[0];

            directive.templateUrl = "template/tabs/tabset1.html";

            return $delegate;
        });
        $provide.decorator('tabDirective', function($delegate) {
            var directive = $delegate[0];

            directive.templateUrl = "template/tabs/tab1.html";

            return $delegate;
        });
}])

This code overrides templateUrl for directives "tab" and "tabset". But even though it is run in config part of "app.customDirective" module, it will have impact on every other module of angular application. So once this code was run, the "tab" directive will permanently have templateUrl set to "template/tabs/tab1.html" no matter from what template of what directive it is instanced. And of course the same applies to "tabset" directive too.

Community
  • 1
  • 1
Dmitry Tolmachov
  • 395
  • 2
  • 11
  • 1
    Consider http://stackoverflow.com/questions/17660947/can-you-override-specific-templates-in-angularui-bootstrap/26339919#26339919 – JcT Apr 23 '15 at 15:46
  • @JcT, unfortunatly and as I feared that solution suffers from a similar issue. The $provide is not bind to module. The changes it makes are made for whole application. I will edit the question to clarify this – Dmitry Tolmachov Apr 23 '15 at 16:11
  • Apologies, perhaps I'm still a little unclear - are you able to make use of setting the templateUrl to a function rather than a string? For example: http://stackoverflow.com/a/23999356/446030 – JcT Apr 24 '15 at 01:11
  • 1
    @JcT After some additional investigation I realized that what I was trying to pull off is impossible with current module system in angular. Because as it turns out angular modules do not have a such thing as private members. http://stackoverflow.com/a/16954554/3504582 So any change made inside a module will be visible to every other module in angular application. So as I understand now, the only way to mess with templates in angularUI is what you pointed me to. – Dmitry Tolmachov May 06 '15 at 12:58

0 Answers0