指令與控制器之間通訊

scope = {}
下面我們要進入一個好玩的部分,當我們將scope的屬性設置爲{}時,我們可以做更多的事情。

AngularJS最強的大的地方之一就是它可以構建組建,無論放在哪裏都是可以使用的;
這所以可以做到這些,不得不歸功於指令的這個屬性;當我們將scope設置爲{}時,意味着我們創建的一個新的與父作用域隔離的新的作用域,這使我們在不知道外部環境的情況下,就可以正常工作,不依賴外部環境。
我們使用了隔離的作用域,不代表我們不可以使用父作用域的屬性和方法。

我們可以通過向scope的{}中傳入特殊的前綴標識符(即prefix),來進行數據的綁定。
在創建了隔離的作用域,我們可以通過@,&,=引用應用指令的元素的屬性,如上面的代碼那樣,我們可以在

這個元素中,利用前綴標識符通過使用屬性my-name,age,change-my-age來引用這些屬性的值。
下面我們來看看如何使用這些前綴標識符:

@
這是一個單項綁定的前綴標識符
使用方法:在元素中使用屬性,好比這樣

,注意,屬性的名字要用-將兩個單詞連接,因爲是數據的單項綁定所以要通過使用{{}}來綁定數據。

=
這是一個雙向數據綁定前綴標識符
使用方法:在元素中使用屬性,好比這樣

,注意,數據的雙向綁定要通過=前綴標識符實現,所以不可以使用{{}}。

&
這是一個綁定函數方法的前綴標識符
使用方法:在元素中使用屬性,好比這樣

,注意,屬性的名字要用-將多個個單詞連接。

注意:在新創建指令的作用域對象中,使用屬性的名字進行綁定時,要使用駝峯命名標準,比如下面的代碼。
scope: {
// myName 就是原來元素中的my-name屬性
name: ‘@myName’,
age: ‘=’,
// changeMyAge就是原來元素中的change-my-age屬性
changeAge: ‘&changeMyAge’
}
進一步說明,我們的指令是如何利用這些前綴標識符來尋找我們想要的屬性或者函數的?

@ 當指令編譯到模板的name時,就會到scope中尋找是否含有name的鍵值對,如果存在,就像上面那樣,看到@就知道這是一個單向的數據綁定,然後尋找原來的那個使用指令的元素上(或者是指令元素本身)含有這個值的屬性即my-name={{name}},然後在父作用域查找{{name}}的值,得到之後傳遞給模板中的name。
=和&與@差不多,只不過=進行的是雙向的數據綁定,不論模板還是父作用域上的屬性的值發生改變都會使另一個值發生改變,而&是綁定函數而已。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章