1. 程式人生 > >angularJS概念理解二:資料變化的傳播

angularJS概念理解二:資料變化的傳播

資料變化的傳播

資料繫結有兩個方向:

  • 資料 → 介面:我們使用scope物件的$watch()方法監聽資料的變化,來更新介面。
  • 介面 → 資料:我們在介面的DOM物件上監聽變化事件,來更新資料,並通過$apply()方法傳播變化。

data bind

上面的圖中,我們把ez-namecard和ez-namecard-editor都繫結到同一個sb物件上,那麼在 ez-namecard-editor上進行編輯,將導致sb物件發生變化;由於ez-namecard監聽了這個變化, 所以,ez-namecard的顯示也應該變化。

  • $watch()

每個scope物件都維護了一個私有的監聽佇列,每次當我們在scope上執行一次$watch方法,就相當於 向這個監聽佇列裡塞入一個監聽函式。

  • $apply()

為了捕捉對資料的修改,AngularJS要求開發者使用scope物件的$apply方法對資料進行修改, $apply方法內部會自動地呼叫監聽佇列裡的監聽函式,比如:

  1. //方法1:直接修改sb物件. 不會自動觸發監聽函式
  2. scope.sb.name ='Tonny';
  3. //方法2:使用scope的$apply方法,在資料修改後會自動觸發監聽函式
  4. scope.$apply("sb.name = 'Tonny'");
  5. //方法3:直接修改sb物件,然後呼叫$apply方法來傳播變化。
  6. scope.sb.name ='Tonny';
  7. scope.$apply("");

在有些情況下,AngularJS會自動呼叫$apply方法,比如在初次編譯的時候。但無論哪種情況, 希望你能瞭解,對資料的變化監聽,總是需要通過$apply方法的呼叫而被啟用,如果 AngularJS沒有獲得一個機會來呼叫$apply,就需要你手工的呼叫它。