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，依据指令名称，按照字母数字排序，字母数字越大越先执行