1

如何在指令的链接函数中包含模板 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) 如何为内部变量添加指向模板 URL 的链接link？

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

4

2 回答 2

2

好吧，对于一种解决方法，您可以在使用渲染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);                 
});

[编辑]

在这个线程中甚至有一个更好的解决方案。 路径取决于您的 Web 服务器的配置方式。但通常是的，它是您的 Index.html 的相对路径。

于 2014-03-29T08:15:03.577 回答
1

您可以使用$templateCache。

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

<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);                
            });
        }
    };
}]);
于 2014-03-29T08:44:51.930 回答