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，依據指令名稱，按照字母數字排序，字母數字越大越先執行