AngularJS 指令的 Scope (作用域)詳解
阿新 • • 發佈:2019-01-27
之前寫指令的時候對於scope的配置雖然都知道都用過,但是總是記不太清,配置的時候總要百度下看下說明。個人感覺一招制敵 - 玩轉 AngularJS 指令的 Scope (作用域)這篇文章寫的很不錯,簡單易懂,而且有程式碼示例。其中有些細節還是沒有說的太透徹,我想總結記錄下,方便以後自己以後翻閱,也希望對其他朋友有幫助。
情況一:scope:false (預設配置)
這種情況最為簡單,指令與父作用域共享,無論在父作用域還是指令中修改模型資料,兩邊的檢視都會發生改變。這裡其實就是一個作用域。
情況二:scope:true
這種情況原文中寫的也很好,當我們將scope設定為true的時候我們就新建立了一個作用域,只不過這個作用域是繼承了我們的父作用域;我覺得可以這樣理解,我們新建立的作用域是一個新的作用域,只不過在初始化的時候,用了父作用域的屬性和方法去填充我們這個新的作用域。它和父作用域不是同一個作用域。 但是有一點說的不是很清晰:新作用域的初始化是什麼時候進行的?最初新作用域的資料也是指向父作用域的,此時我們更改父作用域的資料的值時,指令中的資料也會發生改變。當我們第一次改變指令中資料的值後,它才copy了父作用域的資料來進行初始化。在這之後我們在修改父作用域中的資料都不會對指令中的資料有影響了。
情況三:scope:{}
//程式碼摘抄自上面所提及的文章
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
}
@就知道這是一個單向的資料繫結,然後尋找原來的那個使用指令的元素上(或者是指令元素本身)含有這個值的屬性即my-name={{name}},然後在父作用域查詢{{name}}的值,得到之後傳遞給模板中的name。單向資料繫結,就是說父類改變時,指令資料會改變,而指令對應資料改變時,父類不會變化
=和&與@差不多,只不過=進行的是雙向的資料繫結,不論模板還是父作用域上的屬性的值發生改變都會使另一個值發生改變,而&是繫結函式而已。
以上主要是對一些細節做了簡單描述,在此推薦下原文,寫的卻是很棒,是我學習的物件。第一次用到csdn的markdown還是不是太熟練,望見諒。