Angular JS 自定义指令的scope范围

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相互独立。

注意一个元素多个指令的情况：

1. 同一个元素上的绑定多个指令时，
   • 指令的scope属性可以为均为 scope:false；
   • 可以均为 scope:true；
   • 也可以是这前两者的任意个数组合；
   • 还可以是一个scope:{...}与任意个 scope:false的组合;
   • 但是一定不能是两个及两个以上的scope:{...};;
   • 也不能是scope:true;和scope:{...};的组合。
2. 多个指令绑定在一个元素上最多只能有一个指令定义中有template模版属性。
   • 如果该指令的scope属性是scope:{...}，则该template模版的Scope就是前面提到的独立的Scope2范围；
   • 如果是scope:false ，则该template模版的Scope范围就是前面提到的Scope1 ```，指令对应模版的Scope范围就是这个独立的Scope2范围
   • 如果是scope:true，则该template的Scope范围就是Scope1.ChildScope，并且会集合所有指令中去扩展的Scope属性
3. 多个指令的执行是有顺序的，如果都没有设置priority，依据指令名称，按照字母数字排序，字母数字越大越先执行