Angular JS 自定义指令的scope范围
1. scope:false
(默认值):不会为绑定该指令的元素单独创建Scope范围。即该元素仍然处于原来的Scope范围。
绑定指令前:Scope1,绑定指令后:Scope1
2. scope:true
将为指令的模版创建一个原型继承自其父级的新子范围。即绑定该指令的元素的Scope范围的新子范围ChildScope。如果同一元素上的多个指令都是scope:true
,则只会创建一个ChildScope。
绑定指令前:Scope1,绑定指令后:Scope1.ChildScope
3. scope:{...}
为指令的模板创建一个新的“隔离”范围。它不会从其父范围原型继承。这在创建可重用组件时很有用,这些组件不应该意外地读取或修改父范围中的数据。请注意,一个没有template或templateUrl属性的指令的隔离scope范围不会应用到子元素上。
scope:{info:'=info'}
双向绑定scope:{info:'@infoStr'}
单项绑定 字符串类型scope:{func:'&func'}
双向绑定函数类型
绑定指令前:Scope1, 绑定指令后:Scope2。Scope1和Scope2相互独立。
注意一个元素多个指令的情况:
- 同一个元素上的绑定多个指令时,
- 指令的scope属性可以为均为
scope:false
; - 可以均为
scope:true
; - 也可以是这前两者的任意个数组合;
- 还可以是一个
scope:{...}
与任意个scope:false
的组合; - 但是一定不能是两个及两个以上的
scope:{...};
; - 也不能是
scope:true;
和scope:{...};
的组合。
- 指令的scope属性可以为均为
- 多个指令绑定在一个元素上最多只能有一个指令定义中有template模版属性。
- 如果该指令的scope属性是
scope:{...}
,则该template模版的Scope就是前面提到的独立的Scope2范围; - 如果是
scope:false
,则该template模版的Scope范围就是前面提到的Scope1 ```,指令对应模版的Scope范围就是这个独立的Scope2范围 - 如果是
scope:true
,则该template的Scope范围就是Scope1.ChildScope,并且会集合所有指令中去扩展的Scope属性
- 如果该指令的scope属性是
- 多个指令的执行是有顺序的,如果都没有设置priority,依据指令名称,按照字母数字排序,字母数字越大越先执行