angularJs指令的Scope(做用域)

每當一個指令被建立的時候，都會有這樣一個選擇，是繼承本身的父做用域（通常是外部的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卻沒有發生變化，這說明了一個問題。

1. 當咱們將scope設置爲true的時候，咱們就新建立了一個做用域，只不過這個做用域是繼承了咱們的父做用域；我以爲能夠這樣理解，咱們新建立的做用域是一個新的做用域，只不過在初始化的時候，用了父做用域的屬性和方法去填充咱們這個新的做用域。它和父做用域不是同一個做用域。
2. 當咱們將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>，注意，屬性的名字要用-將多個個單詞鏈接。