如何在 Directive Link 函数中为变量添加 TemplateURL？答案

【问题标题】：How to add TemplateURL for a variable inside Directive Link function?如何在 Directive Link 函数中为变量添加 TemplateURL？
【发布时间】：2014-03-29 08:05:38
【问题描述】：

如何在指令的链接函数中包含模板 URL？我正在尝试做这样的事情：

app.directive('something', function($compile,$timeout) {

   return: {

      link: function(scope,element,attrs) {

           var htmlText = ???? // HOW TO INCLUDE A TEMPLATE URL HERE??

            $compile(htmlText)(scope, function(_element,_scope) {
         element.replaceWith(_element);                 
    });

      }, 

   }

});

当我搜索时，我了解到 Angular 指令可以使用 templateUrl。但我试图将 html 代码存储到一个变量中，该变量位于 link 内，最终被编译。通常对于小代码，我只需将 HTML 内联输入到var htmlText。但是如果我有很多代码，我想将其保存到一个单独的 html 文件中，然后为该变量调用它（如上面示例中所示）。所以我的问题是

1) 如何为link 中的变量添加指向模板URL 的链接？

2) 添加url路径时，是添加index.html文件所在的相对路径还是该指令文件所在的路径？

【问题讨论】：

我不太明白你为什么不能使用templateUrl 属性？ transclude 和异步获取模板曾经存在一些问题，但据我所知，这些问题已在较新的版本中得到解决。
据我了解，如果模板依赖于范围数据，我认为 templateURL 属性不会起作用。
似乎在这里工作：plnkr.co/edit/9NCSytGVEc4tJaIGjnGv?p=preview 但如果指令的范围不是孤立的，可能会有问题？`我以前从未听说过这是一个问题。
很好的例子......是的，它似乎在孤立的范围内工作得很好。但是当我将它作为scope=false 时，它不起作用。我会更多地研究这个并玩一下..谢谢你展示这个。 :)

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-include

【解决方案1】：

好吧，作为一种解决方法，您可以在使用$compile 渲染的普通<div> 中使用ng-include，例如：

link: function(scope,element,attrs) {

       var htmlText = '<div ng-include="path/to/template.html"></div>';

       $compile(htmlText)(scope, function(_element,_scope) {
       element.replaceWith(_element);                 
});

[编辑]

this Thread. 中还有更好的解决方案路径取决于您的 Web 服务器的配置方式。但通常是的，它是您的 Index.html 的相对路径。

【讨论】：

太完美了！在普通的<div> 中使用ng-include 方法的想法是一个好主意，也很简单。我采用了您给出的使用$http 和$templaceCache 的线程中的解决方案。非常感谢。你的回答对我帮助很大。干杯！

【解决方案2】：

您可以使用$templateCache。

Here 是代码，它显示了它是如何工作的：

<body ng-app="App">
    <!-- Include template in $templateCache AUTOMATICALLY -->
    <script type="text/ng-template" id="auto.tpl.html">
        <span style="background-color:yellow">{{title}}</span>        
    </script>

    <dir tpl-id="auto.tpl.html" title="Automatic"></dir>
    <dir tpl-id="manual.tpl.html" title="Manual"></dir>
</body>

脚本：

angular.module('App',[])
.directive('dir',['$templateCache','$compile',function($templateCache,$compile){
    return {
        restrict:'E',
        scope:true,
        link:function($scope, iElement, attrs){
            //Include template in $templateCache MANUALLY
            $templateCache.put('manual.tpl.html','<span style="background-color:red">{{title}}</span>');
            //----------------------------            

            $scope.title = attrs['title'];
            $compile($templateCache.get(attrs['tplId']))($scope,function(cElement){
                iElement.replaceWith(cElement);                
            });
        }
    };
}]);

【讨论】：

谢谢@Engineer。我也喜欢你的方法。然而，与其他解决方案相比，它看起来需要做很多工作。不过还是谢谢大家。你的回答让我知道如何使用$templateCache 做到这一点。非常感谢！