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

发布时间：2020-12-17 08:41:52 所属栏目：安全来源：网络整理

导读：我有一个递归的Angular指令，它使用一个模板变量，并在链接函数中编译。问题是，我的模板已经变得很长，失去控制，我想外部化它在一个外部HTML文件(它也将使它更容易，例如自动缩进)。如何将外部模板加载到可以在$ compile中使用的指令？我看过templateUR

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

问题是，我的模板已经变得很长，失去控制，我想外部化它在一个外部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);
        }
}

和

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!