scope
指令,是AngularJS
最常用的功能,让我们很容易在前台实现代码复用。而指令最精髓的地方,就在于指令内外域scope
的交互方式。
本文属于一篇对文档的翻译加上一些自己对此的理解,因水平有限,可能某些地方翻译的不通顺,或者翻译的错了,欢迎大家批评指正。本文对scope
的用法以及描述均翻译自AngularJS
英文文档,文档地址:AngularJS 官方文档
scope
属性的值可以是false
,可以是true
,也可以是对象。
false
false
:这是指令scope
的默认属性,不会为指令创建一个scope
,这个指令会使用他的父scope
。
true
true
:为指令创建一个从父scope
原型继承的子scope
。
对象
{key: value}
:为指令创建一个新的隔离scope
,隔离scope
和通常的scope
的区别在于:隔离scope
不从父scope
做原型继承。
不从父scope
做原型继承,这对于创建可重用的组件非常有用,可重用组件不应该从父scope
读取或修改属性。
注意:一个有隔离scope
但是没有template
或templateUrl
的指令不会将隔离scope
应用到它的子元素。这是文档上写的,目前还没有理解到究竟是什么意思。
也可能是我翻译的不对,以下是原文:
Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.
隔离对象定义了源于指令元素的属性的本地scope
属性集合。
scope绑定
以下几种绑定都是可以加参数的。
例:
scope: {
name: '=nameAttr'
}
绑定的就是:<test name-attr="'hello'"></test>
。
scope: {
name: '='
}
绑定的就是:<test name="'hello'"></test>
。
字符串绑定
@
/@attr
:绑定本地scope
的属性到DOM
属性的值,这个结果总是一个字符串,因为DOM
属性就是字符串。随着DOM
属性值的改变,指令scope
上的属性也会改变,因为这个属性是在它的父scope
上读取的。
双向绑定
=
/=attr
:本地scope
的属性和传递到属性上的表达式建立双向绑定,该表达式是在父scope
的范围内计算的。如果绑定的表达式不是可赋值的,或者它不是可选的但是指令中没有传,$compile:noassign
异常就会被抛出,因为它无法和父scope
同步。
默认地,$watch
方法通常用来监听改变,并且根据对象的地址来进行相等判断。然而,如果一个对象地址或数组地址被传递到绑定的表达式中,比较的方法就是通过判断值是否相等。也可以使用=*
/=*attr
和$watchCollection
进行浅监听。
这段话还不是很理解,在StackOverflow
找到了一个靠谱的回答,但还不是很明白。AngularJS =* 问题
单向绑定
<
/<attr
:在本地scope
和传递到DOM
属性上的表达式之间建立单向绑定,所有在DOM
属性上表达式的改变会反映到scope
的属性上,但是scope
属性上的改变不会反映到DOM
属性的表达式上。
但是这有两个警告:
1.单向绑定不是将父scope
的值拷贝到隔离scope
上,而是简单的设置相同的值。如果你传的是一个对象,那在隔离scope
上对该对象的改变会反映到父scope
上,因为两者引用同一个对象。
2.单向绑定监视的是父值地址的改变。这意味着在父值上的$watch
仅仅在引用的地址发生改变时才会生效。大多数情况下,这是不需要关心的。但是必须要知道如果你单向绑定了一个对象,然后会改变隔离scope
上的对象,如果改变了父scope
上的该对象的一个属性,这个改变是不会传递到隔离scope
上的,因为这个对象的地址没有改变,除非你赋值一个新的对象。
如果不打算将隔离scope
的改变传播会父节点,单向绑定是很有用的。
绑定方法
&
/&attr
:在父scope
提供一个可执行的表达式,就是传一个方法。
设置可选
所有的绑定(@, =, <, &
)都能通过在表达式上添加?
设置为可选的,这个标志必须在绑定模式之后,属性名称之前。
可选和不可选的区别在于:
- 绑定是可选的,这个属性不会被定义。
- 绑定不是可选的,这个属性被定义了。
以下是AngularJS
文档中对可选指令的示例代码。
app.directive('testDir', function() {
return {
scope: {
notoptional: '=',
optional: '=?',
},
bindToController: true,
controller: function() {
this.$onInit = function() {
console.log(this.hasOwnProperty('notoptional')); // true
console.log(this.hasOwnProperty('optional')); // false
}
}
};
});