β

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

Superlin's Blog 182 阅读

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

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

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

false指令与true指令共存

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

false指令与true指令共存

例子如下,注意观察控制台: http://plnkr.co/edit/OQjzpHitbMpPnVBeQT4Y?p=preview

false指令与isolated指令共存

false指令使用父级 Scope ,isolated指令会新建的独立 Scope 。两者共存时同样会为isolated指令创建独立 Scope ,并将此独立 Scope 用于isolated指令的link函数;false指令的link使用的是父级 Scope ,但是对于该元素下子元素有效的仍然是父级 Scope 。也就是说新建的独立 Scope 会被忽略,子级元素的编译(compile)使用的仍然是父级 Scope

false指令与isolated指令共存

http://plnkr.co/edit/uDfoF7WVsF8ONd7jW6tu?p=preview

isolated指令与true指令共存

这两种指令都会创建新的 Scope ,但是类型不同,两者共存时就会发生编译错误:

Error: [$compile:multidir] Multiple directives [isolatedScope, trueScope] asking for new/isolated scope  

http://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指令共存

http://plnkr.co/edit/IJLpqwBzteUKSNNfcno4?p=preview

多个false指令共存

这种情况对于 Scope 不会有什么影响,都是使用的父级 Scope ,并没有什么特殊之处。

多个isolated指令共存

多个isolated指令共存时,都要求创建新的独立 Scope ,也会发生编译报错:

Error: [$compile:multidir] Multiple directives [isolated1Scope, isolated2Scope] asking for new/isolated scope  

http://plnkr.co/edit/aGljrX8EXNuvYfTC8J8E?p=preview

三种指令共存

isolated指令与true指令共存时会报错,所以这种情况也很容易想清楚,他们共存时也会报错。

指令的 Scope 是十分复杂的,这里只是最基本的讨论,如果指令设置了属性 transclude: true ,也会影响子级元素的 Scope 行为,这里可以参看之前的文章中 关于Scope的解释

此外 Scope 的行为在编译过程中也是很重要的,指令的控制器,link函数都会用到 Scope ,以后的文章中涉及 Scope 的内容再做讲解。

作者:Superlin's Blog
Front-End, Web, CSS, HTML, Javascript, HTML5, CSS3, Node JS...balaba
原文地址:一个元素上的多个指令的Scope创建, 感谢原作者分享。

发表评论