Page 93 - AngularJS权威教程

10.1 指令定义 73

当AngularJS启动应用时，它会把第一个参数当作一个字符串，并以此字符串为名来注册第 1
二个参数返回的对象。AngularJS编译器会解析主HTML的DOM中的元素、属性、注释和CSS类名
中使用了这个名字的地方，并在这些地方引用对应的指令。当它找到某个已知的指令时，就会在
页面中插入指令所对应的DOM元素。 2

<div my-directive></div>
3

为了避免与未来的HTML标准冲突，给自定义的指令加入前缀来代表自定义的
命名空间。AngularJS本身已经使用了ng-前缀，所以可以选择除此以外的名字。 4
在例子中我们使用my-前缀（比如my-derictive）。
5
指令的工厂函数只会在编译器第一次匹配到这个指令时调用一次。和controller函数类似，
我们通过$injetor.invoke来调用指令的工厂函数。
6
当AngularJS在DOM中遇到具名的指令时，会去匹配已经注册过的指令，并通过名字在注册
过的对象中查找。此时，就开始了一个指令的生命周期，指令的生命周期开始于$compile方法并
结束于link方法，在本章后面的内容中我们会详细介绍这个过程。 7
下面，来看看定义一个指令时可以使用的全部设置选项。
8

一个JavaScript对象由键和值组成。当一个给定键的值被设置为一个字符串、布
尔值、数字、数组或对象时，我们把这个键称为属性。当把键设置为函数时， 9
我们把它叫做方法。
10
可能的选项如下所示，每个键的值说明了可以将这个属性设置为何种类型或者什么样的
函数：
11
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String, 12
priority: Number,
terminal: Boolean,
template: String or Template Function: 13
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String, 14
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... }, 15
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... }, 16
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... }, 17
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者 18
return function postLink(...) { ... }