angularJS概念理解二:資料變化的傳播
阿新 • • 發佈:2019-02-08
資料變化的傳播
資料繫結有兩個方向:
- 資料 → 介面:我們使用scope物件的$watch()方法監聽資料的變化,來更新介面。
- 介面 → 資料:我們在介面的DOM物件上監聽變化事件,來更新資料,並通過$apply()方法傳播變化。
上面的圖中,我們把ez-namecard和ez-namecard-editor都繫結到同一個sb物件上,那麼在 ez-namecard-editor上進行編輯,將導致sb物件發生變化;由於ez-namecard監聽了這個變化, 所以,ez-namecard的顯示也應該變化。
- $watch()
每個scope物件都維護了一個私有的監聽佇列,每次當我們在scope上執行一次$watch方法,就相當於 向這個監聽佇列裡塞入一個監聽函式。
- $apply()
為了捕捉對資料的修改,AngularJS要求開發者使用scope物件的$apply方法對資料進行修改, $apply方法內部會自動地呼叫監聽佇列裡的監聽函式,比如:
- //方法1:直接修改sb物件. 不會自動觸發監聽函式
- scope.sb.name ='Tonny';
- //方法2:使用scope的$apply方法,在資料修改後會自動觸發監聽函式
- scope.$apply("sb.name = 'Tonny'");
- //方法3:直接修改sb物件,然後呼叫$apply方法來傳播變化。
- scope.sb.name ='Tonny';
- scope.$apply("");
在有些情況下,AngularJS會自動呼叫$apply方法,比如在初次編譯的時候。但無論哪種情況, 希望你能瞭解,對資料的變化監聽,總是需要通過$apply方法的呼叫而被啟用,如果 AngularJS沒有獲得一個機會來呼叫$apply,就需要你手工的呼叫它。