每當(dāng)一個(gè)指令被創(chuàng)建的時(shí)候，都會(huì)有這樣一個(gè)選擇，是繼承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），還是創(chuàng)建一個(gè)新的自己的作用域，當(dāng)然AngularJS為我們指令的scope參數(shù)提供了三種選擇，分別是：false,true,{}；默認(rèn)情況下是false。

1.scope = false

JS 代碼：

html 代碼：

result:

修改文本框的內(nèi)容，兩個(gè)名字都會(huì)變，實(shí)際上修改的是同一個(gè)$scope的name屬性。

2. scope=true

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

然后我們?cè)僭囍谖覀兊膇nput輸入框中寫(xiě)一些字符串，會(huì)發(fā)現(xiàn)，指令中的那個(gè)name發(fā)生了變化，但是指令外的那個(gè)name卻沒(méi)有發(fā)生變化，這說(shuō)明了一個(gè)問(wèn)題。

當(dāng)我們將scope設(shè)置為true的時(shí)候，我們就新創(chuàng)建了一個(gè)作用域，只不過(guò)這個(gè)作用域是繼承了我們的父作用域；我覺(jué)得可以這樣理解，我們新創(chuàng)建的作用域是一個(gè)新的作用域，只不過(guò)在初始化的時(shí)候，用了父作用域的屬性和方法去填充我們這個(gè)新的作用域。它和父作用域不是同一個(gè)作用域。
當(dāng)我們將scope設(shè)置為false的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model模型，所以在指令中修改模型數(shù)據(jù)，它會(huì)反映到父作用域的模型中。

3. scope={}

當(dāng)我們將scope設(shè)置為{}時(shí)，意味著我們創(chuàng)建的一個(gè)新的與父作用域隔離的新的作用域，這使我們?cè)诓恢劳獠凯h(huán)境的情況下，就可以正常工作，不依賴外部環(huán)境。

JS代碼：

html代碼：

result：

修改文本框內(nèi)容只有指令中的名字會(huì)被修改.

scope: {@=&}

@
這是一個(gè)單項(xiàng)綁定的前綴標(biāo)識(shí)符
使用方法：在元素中使用屬性，好比這樣<div my-directive my-name="{{name}}"></div>，注意，屬性的名字要用-將兩個(gè)單詞連接，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過(guò)使用{{}}來(lái)綁定數(shù)據(jù)。

=
這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識(shí)符
使用方法：在元素中使用屬性，好比這樣<div my-directive age="age"></div>,注意，數(shù)據(jù)的雙向綁定要通過(guò)=前綴標(biāo)識(shí)符實(shí)現(xiàn)，所以不可以使用{{}}。

&
這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符
使用方法：在元素中使用屬性，好比這樣<div my-directive change-my-age="changeAge()"></div>，注意，屬性的名字要用-將多個(gè)個(gè)單詞連接。

以上就是小編為大家?guī)?lái)的關(guān)于angularJs指令的Scope(作用域)介紹全部?jī)?nèi)容了，希望大家多多支持腳本之家~

最新評(píng)論