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

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(检查网络选项卡以查看单个网络请求)