一个元素上的多个指令的Scope创建

指令(Directive)是Angular的核心之一,有了指令我们就可以轻松开发出可复用的组件了。当12bet,定义一个指令时,有很多可以配置的选项,其中比较复杂的一个就是ScopeScope可以有三种配置值:

  • scope: false:默认值,指令不会新建一个作用域,使用父级作用域。
  • scope: true:指令会创建一个新的子作用域,原型继承于父级作用域。
  • scope: { … }:指令会新建一个独立作用域,12博体育,不会原型继承父作用域。

12bet,每个指令对于Scope的行为都是不一样的,那么如果某一个元素上有多个指令共存时,Scope的行为是怎样的呢?下面就一起来看一看吧。对于以上的三种情况,简称为:false指令true指令isolated指令

更多关于Scope的内容请看理解Angular的作用域(译)

false指令与true指令共存

false指令使用父级Scope,true指令创建新Scope,两者共存时将共享新建的Scope,12bet,并且该Scope原型继承自父级Scope

false指令与true指令共存

例子如下,注意观察控制台: 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

false指令与isolated指令共存

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.

多个true指令共存

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的内容再做讲解。

Author image
关于 superlin
Beijing, CN 主页
The reason why a great man is great is that he resolves to be a great man.
 
 
默认颜色 边栏居左 边栏居右