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

您可以使用$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请求)

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

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