首頁  >  文章  >  web前端  >  關於angularJs指令的Scope(作用域)介紹

關於angularJs指令的Scope(作用域)介紹

高洛峰
高洛峰原創
2016-12-09 10:31:141034瀏覽

每當一個指令被創建的時候,都會有這樣一個選擇,是繼承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),還是創建一個新的自己的作用域,當然AngularJS為我們指令的scope參數提供了三種選擇,分別是:false,true,{};預設為false。

1.scope = false

JS 碼:

關於angularJs指令的Scope(作用域)介紹

html 代碼:

關於angularJs指令的Scope(作用域)介紹

result:實際上一個$scope的name屬性。

2. scope=true關於angularJs指令的Scope(作用域)介紹

修改上面的JS程式碼,將指令中的:scope:false修改為scope:true

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

當我們將scope設為true的時候,我們就新創建了一個作用域,只不過這個作用域是繼承了我們的父作用域;我覺得可以這樣理解,我們新創建的作用域是一個新的作用域,只不過在初始化的時候,用了父作用域的屬性和方法去填滿我們這個新的作用域。它和父作用域不是同一個作用域。

當我們將scope設定為false的時候,我們創建的指令和父作用域(其實是同一個作用域)共享同一個model模型,所以在指令中修改模型數據,它會反映到父作用域的模型中。

3. scope={}

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

JS程式碼:

html程式碼:

關於angularJs指令的Scope(作用域)介紹

result:

關於angularJs指令的Scope(作用域)介紹

:修改文字方塊中只有指令的名稱內容會被修改

: 關於angularJs指令的Scope(作用域)介紹這是一個單一項目綁定的前綴標識符

使用方法:在元素中使用屬性,好比這樣
,注意,屬性的名字要用-將兩個單字連接,因為是資料的單一項目綁定所以要透過使用{{}}來綁定資料。

=

這是一個雙向資料綁定前綴標識符

使用方法:在元素中使用屬性,好比這樣
,注意,資料的雙向綁定要透過=前綴標識符實現,所以不可以使用{{}}。


&
這是一個綁定函數方法的前綴標識符

使用方法:在元素中使用屬性,好比這樣
,注意,屬性的名字要用-將多個單字連接。



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn