Question

如何在指令中的链接函数中包含模板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内的变量。通常对于小代码，我只需键入内联到var htmlText的HTML。但是如果我有很多代码，我想将它保存到一个单独的html文件中，然后为该变量调用它（如上面的例子所示）。所以我的问题是

1）如何为link内的变量添加指向模板网址的链接？

2）当我添加url路径时，是否添加index.html文件所在的相对路径或该指令文件所在的路径？

Answer 1

好吧，对于解决方法，您可以在使用ng-include呈现的普通<div>中使用$compile，例如：

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的相对路径。

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

如何在Directive Link功能中为变量添加TemplateURL？

2 个答案: