AngularJS文档提供了templateUrl
示例:
使用:
//ngApp...
<div ng-controller="Ctrl">
<div my-customer></div>
</div>
在控制器中:
....directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
})
my-customer.html是外部文件:
一切都好。但是他们提供了编辑它的选项(通过jsfiddle):
但是 - 它是一个模板标签! :
<div ng-app="docsTemplateUrlDirective">
<div ng-controller="Ctrl">
<div my-customer></div>
</div>
<!-- my-customer.html -->
<script type="text/ng-template" id="my-customer.html">
Name: {{customer.name}} Address: {{customer.address}}
</script>
</div>
问题:
NG如何知道它是外部文件还是Tag元素ID?我怎么能强迫它到某种类型?
(p.s。 - 未在docs中找到它。)
答案 0 :(得分:5)
我将添加@QuarK开头的内容,或许可以填写更多细节。
$templateCache
在模板解析后(内联或从文件中)用作模板的存储库。
带script
的{{1}}代码的source如下所示:
text/ng-templates
您可以看到,如果找到var scriptDirective = ['$templateCache', function($templateCache) {
return {
restrict: 'E',
terminal: true,
compile: function(element, attr) {
if (attr.type == 'text/ng-template') {
var templateUrl = attr.id,
// IE is not consistent, in scripts we have to read .text but in other nodes we have to read .textContent
text = element[0].text;
$templateCache.put(templateUrl, text);
}
}
};
}];
代码且script
为attr.type
,则angular会将内容放入text/ng-template
的{{1}}索引中}}
最近才向Angular引入了这样的$templateCache
标签。因此,这是一个允许内联定义而无需外部文件的选项。但是,在下面,一旦解决,两者都使用相同的机制进行读取和编译(templateUrl
)。
希望这有帮助。
答案 1 :(得分:0)
这是通过$ templateCache,你可以在它的API中找到文档: