1.scope = false
JS 代碼:
html 代碼:
result:
修改文本框的內(nèi)容,兩個(gè)名字都會(huì)變,實(shí)際上修改的是同一個(gè)$scope的name屬性。
2. scope=true
修改上面的JS代碼,將指令中的:scope:false修改為scope:true
然后我們再試著在我們的input輸入框中寫一些字符串,會(huì)發(fā)現(xiàn),指令中的那個(gè)name發(fā)生了變化,但是指令外的那個(gè)name卻沒有發(fā)生變化,這說明了一個(gè)問題。
當(dāng)我們將scope設(shè)置為true的時(shí)候,我們就新創(chuàng)建了一個(gè)作用域,只不過這個(gè)作用域是繼承了我們的父作用域;我覺得可以這樣理解,我們新創(chuàng)建的作用域是一個(gè)新的作用域,只不過在初始化的時(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è)新的與父作用域隔離的新的作用域,這使我們在不知道外部環(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)綁定所以要通過使用{{}}來綁定數(shù)據(jù)。
=
這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識(shí)符
使用方法:在元素中使用屬性,好比這樣<div my-directive age="age"></div>,注意,數(shù)據(jù)的雙向綁定要通過=前綴標(biāo)識(shí)符實(shí)現(xiàn),所以不可以使用{{}}。
&
這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符
使用方法:在元素中使用屬性,好比這樣<div my-directive change-my-age="changeAge()"></div>,注意,屬性的名字要用-將多個(gè)個(gè)單詞連接。
Copyright ? 2019- 91gzw.com 版權(quán)所有 湘ICP備2023023988號(hào)-2
違法及侵權(quán)請聯(lián)系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)