關於angularJs指令的Scope(範圍)介紹_AngularJS

每當一個指令被建立的時候，都會有這樣一個選擇，是繼承自己的父範圍（一般是外部的Controller提供的範圍或者根範圍（$rootScope）），還是建立一個新的自己的範圍，當然AngularJS為我們指令的scope參數提供了三種選擇，分別是：false,true,{}；預設情況下是false。

1.scope = false

JS 代碼：

html 代碼：

result:

修改文字框的內容，兩個名字都會變，實際上修改的是同一個$scope的name屬性。

2. scope=true

修改上面的JS代碼，將指令中的：scope:false修改為scope:true

然後我們再試著在我們的input輸入框中寫一些字串，會發現，指令中的那個name發生了變化，但是指令外的那個name卻沒有發生變化，這說明了一個問題。

當我們將scope設定為true的時候，我們就新建立了一個範圍，只不過這個範圍是繼承了我們的父範圍；我覺得可以這樣理解，我們新建立的範圍是一個新的範圍，只不過在初始化的時候，用了父範圍的屬性和方法去填充我們這個新的範圍。它和父範圍不是同一個範圍。
當我們將scope設定為false的時候,我們建立的指令和父範圍（其實是同一個範圍）共用同一個model模型，所以在指令中修改模型資料，它會反映到父範圍的模型中。

3. scope={}

當我們將scope設定為{}時，意味著我們建立的一個新的與父範圍隔離的新的範圍，這使我們在不知道外部環境的情況下，就可以正常工作，不依賴外部環境。

JS代碼：

html代碼：

result：

修改文字框內容只有指令中的名字會被修改.

scope: {@=&}

@
這是一個單項綁定的首碼標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive my-name="{{name}}"></div>，注意，屬性的名字要用-將兩個單詞串連，因為是資料的單項綁定所以要通過使用{{}}來綁定資料。

=
這是一個雙向資料繫結首碼標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive age="age"></div>,注意，資料的雙向繫結要通過=首碼標識符實現，所以不可以使用{{}}。

&
這是一個綁定函數方法的首碼標識符
使用方法：在元素中使用屬性，好比這樣<div my-directive change-my-age="changeAge()"></div>，注意，屬性的名字要用-將多個個單詞串連。

以上就是小編為大家帶來的關於angularJs指令的Scope(範圍)介紹全部內容了，希望大家多多支援雲棲社區~