在 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

如果模板较大，我更喜欢使用 $http 加载模板：-

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

Answer 2

您可以使用$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（检查网络选项卡以查看单个网络请求）

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

Using $compile on external template (templateURL) in Angular directive

templates

external

angularjs

angularjs-directive