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

我有一个recursion的Angular指令，它使用一个模板variables，并在link函数中进行编译。

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

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

我见过templateURL ，但是这不让我命名该variables并将其传递给$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服务来获取模板。 这是一个便利的服务，它也caching了$templateCache ，因此只有一个对template.html请求被创build。

作为一个例子（并没有进入recursion指令的问题），这是这样使用的：

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

plunker （检查networking选项卡以查看单个networking请求）

Answer 2

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

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