Page 95 - AngularJS权威教程
P. 95
10.1 指令定义 75
做一个时钟(忽略对老版本IE浏览器的支持),可以创建一个clock指令,然后在DOM中用如下 1
代码来声明:
<my-clock></my-clock> 2
这样做可以告诉指令的使用者,这里会完整包含应用的某一部分内容。这个时钟并不是对一
个既有时钟的修饰或扩展,而是一个全新的单元。尽管这里也可以使用属性形式声明指令 3
(AngularJS并不在意),但我们选择了元素形式,因为这样可以更明确地表达意图。
用属性形式来给一个已经存在的元素添加数据或行为。以时钟为例,假设我们更喜欢模拟时钟: 4
<my-clock clock-display="analog"></my-clock>
如何进行选择,通常取决于定义的指令是否包含某个组件的核心行为,或者用额外的行为、 5
状态或者其他内容(比如模拟时钟)对某个核心组件进行修饰或扩展。
使用何种指令声明格式的指导原则是能够准确表达每一段代码的意图,创造易于理解和分享 6
的清晰代码。
另外一个重要的标准,是根据指令是否创建、继承或将自己从所属的环境中隔离出去进行判 7
断。指令的父子关系对其组成和重用性起着至关重要的作用,会有额外的内容来更加深入地讨论
指令的作用域。 8
10.1.2 优先级(数值型) 9
优先级参数可以被设置为一个数值。大多数指令会忽略这个参数,使用默认值0,但也有些
场景设置高优先级是非常重要甚至是必须的。例如, ngRepeat将这个参数设置为1000,这样就可 10
以保证在同一元素上,它总是在其他指令之前被调用。
如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一 11
个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。
12
ngRepeat是所有内置指令中优先级最高的,它总是在其他指令之前运行。这样
设置主要考虑的是性能。在讨论编译参数时会更详细介绍性能相关的内容。
13
10.1.3 terminal(布尔型) 14
terminal是一个布尔型参数,可以被设置为true或false。
15
这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令
优先级相同的指令还是会被执行。
16
如果元素上某个指令设置了terminal参数并具有较高的优先级,就不要再用其他低优先级的
指令对其进行修饰了,因为不会被调用。但是具有相同优先级的指令还是会被继续调用。
17
使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView,如果ngIf的表
达式值为true,ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先
级较低就不会被执行。 18