Page 96 - AngularJS权威教程

76 第 10 章 指令详解

10.1.4 template（字符串或函数）

template参数是可选的，必须被设置为以下两种形式之一：
 一段HTML文本；
 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符
串。tElement和tAttrs中的t代表template，是相对于instance的。在讨论链接和编译
设置时会详细介绍，模板元素或属性与实例元素或属性之间的区别。

AngularJS会同处理HTML一样处理模板字符串。模板中可以通过大括号标记来访问作用域，
例如{{ expression }}。

如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包
含在一个父元素内。换句话说，必须存在一个根DOM元素：

template: '\
<div> <-- single root element -->\
<a href="http://google.com">Click me</a>\
<h1>When using two elements, wrap them in a parent element</h1>\
</div>\
另外，注意每一行末尾的反斜线，这样AngularJS才能正确解析多行字符串。在实际生产中，
更好的选择是使用templateUrl参数引用外部模板，因为多行文本阅读和维护起来都是一场噩梦。
模板字符串和templateURL中最需要了解的重要功能，是它们如何同作用域链接起来。第8
章讨论了作用域是如何传递给指令的。

10.1.5 templateUrl（字符串或函数）

templateUrl是可选的参数，可以是以下类型：

 一个代表外部HTML文件路径的字符串；
 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件
路径的字符串。

无论哪种方式，模板的URL都将通过AngularJS内置的安全层，特别是$getTrusted
ResourceUrl，这样可以保护模板不会被不信任的源加载。
默认情况下，调用指令时会在后台通过Ajax来请求HTML模板文件。有两件事情需要知道。

 在本地开发时，需要在后台运行一个本地服务器，用以从文件系统加载HTML模板，否则
会导致Cross Origin Request Script（CORS）错误。
 模板加载是异步的，意味着编译和链接要暂停，等待模板加载完成。
通过Ajax异步加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟，可以在部
署应用之前对HTML模板进行缓存。在大多数场景下缓存都是一个非常好的选择，因为AngularJS
通过减少请求数量提升了性能。更多关于缓存的内容请查看第28章。
模板加载后，AngularJS会将它默认缓存到$templateCache服务中。在实际生产中，可以提
前将模板缓存到一个定义模板的JavaScript文件中，这样就不需要通过XHR来加载模板了。更多