Question

我有一个递归的Angular指令，它使用模板变量并在link函数中编译。

问题是，我的模板已经变得很长并且失去控制，我想在外部HTML文件中将其外化（例如，它也会更容易自动缩进）。

如何将外部模板加载到可在$compile内使用的指令中？

我见过templateURL，但这不允许我将变量命名并将其传递给$compile函数。

var template = 
           "<p>My template</p>"+
           "<this-directive val='pass-value'></this-directive>";

return {
     scope: {
     ...
     },
     ...
     link: function(scope, element){
            element.html(template);
            $compile(element.contents())(scope);
        }
}

和

Answer 1

您可以使用$templateRequest服务获取模板。这是一种便捷服务，也可以在$templateCache中缓存模板，因此只能向template.html发出一个请求。

作为一个例子（并且不涉及递归指令的问题），这样使用：

link: function(scope, element){
   $templateRequest("template.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
};

plunker（查看网络标签以查看单个网络请求）

Answer 2

我更喜欢使用$ http来加载模板，如果它的大小更大： -

$http.get('mytemp.html').then(function(response) {
            element.html(response.data);
            $compile(element.contents())(scope);
            });

在Angular指令中使用外部模板上的$ compile（templateURL）

2 个答案: