Javascript 如何正确更改angular ui的模板？

主题

我将使用这个包中的tabs模块（ui.bootstrap.tabs）。我浏览了ui-bootstrap-tpls.js文件，看到了模板现在的定义方式

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" +
   "");
}]);

但在我用angular 1.3.5检查过之后，似乎每个应用程序都创建了$templateCache。因此，无论模块依赖关系树是什么，$templateCache都将保存最新put调用的内容。因此，每个应用程序只能使用一个版本的“template/tabs/tab.html”

有没有其他办法克服这个问题

编辑1: 正如这里所建议的，可以使用$PROFECT service。但它也面临同样的问题。 假设我们有

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;
        });
}])

---

此代码覆盖指令“tab”和“tabset”的templateUrl。但即使它是在“app.customDirective”模块的配置部分运行的，它也会对angular应用程序的所有其他模块产生影响。因此，一旦运行了这段代码，“tab”指令将永久地将templateUrl设置为“template/tabs/tab1.html”，而不管它是从哪个指令的哪个模板实例化的。当然，“tabset”指令也是如此

不幸的是，请考虑@JcT，因为我担心解决方案会遇到类似的问题。$provide未绑定到模块。它所做的更改适用于整个应用程序。我将对问题进行编辑以澄清这一点抱歉，也许我还有点不清楚-您是否能够利用将templateUrl设置为函数而不是字符串？例如：@JcT在做了一些额外的调查之后，我意识到我试图实现的目标是不可能的，因为目前的模块系统处于角度。因为事实证明，angular模块没有私有成员这样的东西。因此，模块内部所做的任何更改都将对角度应用程序中的其他模块可见。我现在明白了，在angularUI中处理模板的唯一方法就是你指给我的。

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;
        });
}])