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

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

监听器（检查“网络”标签以查看单个网络请求）