指令(Directive)是Angular的核心之一,有了指令我们就可以轻松开发出可复用的组件了。当12bet,定义一个指令时,有很多可以配置的选项,其中比较复杂的一个就是Scope
,Scope
可以有三种配置值:
- scope: false:默认值,指令不会新建一个作用域,使用父级作用域。
- scope: true:指令会创建一个新的子作用域,原型继承于父级作用域。
- scope: { … }:指令会新建一个独立作用域,12博体育,不会原型继承父作用域。
12bet,每个指令对于Scope
的行为都是不一样的,那么如果某一个元素上有多个指令共存时,Scope
的行为是怎样的呢?下面就一起来看一看吧。对于以上的三种情况,简称为:false指令、true指令和isolated指令。
更多关于Scope
的内容请看理解Angular的作用域(译)
false指令与true指令共存
false指令使用父级Scope
,true指令创建新Scope
,两者共存时将共享新建的Scope
,12bet,并且该Scope
原型继承自父级Scope
。
例子如下,注意观察控制台: https://plnkr.co/edit/OQjzpHitbMpPnVBeQT4Y?p=preview
false指令与isolated指令共存
false指令使用父级Scope
,isolated指令会新建的独立Scope
。12bet,两者共存时同样会为isolated指令创建独立Scope
,并将此独立Scope
用于isolated指令的link函数;false指令的link使用的是父级Scope
,但是对于该元素下子元素有效的仍然是父级Scope
。12博体育,也就是说新建的独立Scope
会被忽略,子级元素的编译(compile)使用的仍然是父级Scope
。
https://plnkr.co/edit/uDfoF7WVsF8ONd7jW6tu?p=preview
isolated指令与true指令共存
这两种指令都会创建新的Scope
,但是类型不同,两者共存时就会发生编译错误:
Error: [$compile:multidir] Multiple directives [isolatedScope, trueScope] asking for new/isolated scope
https://plnkr.co/edit/NYUZXwbLldVvRPXdatwW?p=preview
多个true指令共存
多个true指令共存时,只会创建一个新的Scope
,该Scope
继承自父级Scope
,并且被这些指令共享。这里和指令的编译过程有关,可以看看$compile的文档。其中有如下说明:
If multiple directives on the same element request a new scope, only one new scope is created.
https://plnkr.co/edit/IJLpqwBzteUKSNNfcno4?p=preview
多个false指令共存
这种情况对于Scope
不会有什么影响,都是使用的父级Scope
,并没有什么特殊之处。
多个isolated指令共存
多个isolated指令共存时,都要求创建新的独立Scope
,也会发生编译报错:
Error: [$compile:multidir] Multiple directives [isolated1Scope, isolated2Scope] asking for new/isolated scope
https://plnkr.co/edit/aGljrX8EXNuvYfTC8J8E?p=preview
三种指令共存
isolated指令与true指令共存时会报错,所以这种情况也很容易想清楚,他们共存时也会报错。
指令的Scope
是十分复杂的,这里只是最基本的讨论,如果指令设置了属性transclude: true
,也会影响子级元素的Scope
行为,这里可以参看之前的文章中关于Scope的解释。
此外Scope
的行为在编译过程中也是很重要的,指令的控制器,link函数都会用到Scope
,以后的文章中涉及Scope
的内容再做讲解。