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