引言和數據綁定相關指令1 代碼實現2 代碼解釋雙向綁定是如何實現的1 雙向綁定原理watch 隊列2 雙向綁定原理digest循環3 雙向綁定原理apply方法總結

1.引言

      在上一篇博客中我們介紹了兩個指令，一個是ng-app，另外一個是ng-init，其中前一個是指令angularjs的作用域，第二個指令是設置angular初始化變量的，在本片博客中，我們將會介紹一下和數據綁定相關的指令，其中一個是ng-model，另外一個是ng-bind。

2.和數據綁定相關指令

      我們通過html輸出數據可以通過兩種方式，一種是通過表達式，一個是可以通過ng-bind指令，如何將我們的數據綁定到angularjs的變量呢？我們可以通過ng-model指令，ng-model指令可以實現雙向綁定，也就是說：如果我們通過ng-model修改了變量的值，將會直接修改到html。

2.1 代碼實現

2.2 代碼解釋

我們通過標簽輸出了test變量，注意，當我們使用ng-bind指令時，實際上是添加了innerHTML屬性，如下圖所示

ng-bind指令相對于{{}}（表達式）的優勢，當瀏覽器加載比較慢的時候，瀏覽器會出現{{}}符合，而ng-bind不會出現

3 雙向綁定是如何實現的

      在上面的程序的時候，我們肯定會有一個疑問：為什么我們輸入文本框，下面的信息會相應改變呢？也就是說雙向綁定是如何實現的？接下來我們就用文字描述一下雙向綁定是如何實現的？

3.1 雙向綁定原理（$watch 隊列）

      在angularjs中有一個$watch 隊列的概念，$watch 隊列中存放一系列的$watch對象，那么$watch對象是如何產生的呢？每當我們綁定數據到UI上時，會自動生成一個$watch對象，然后將$watch對象存放到$watch 隊列中，如下面的代碼：

代碼中生成了兩個變量每一個是user，一個是pass,該變量綁定到了UI上，因此會自動生成兩個$watch對象，然后存放到$watch 隊列中。

接下來我們再看第二段的代碼：

這里，即便我們在$scope上添加了兩個變量，但是只有一個綁定在了UI上，因此在這里只生成了一個$watch對象。

3.2 雙向綁定原理（$digest循環）

      瀏覽器一直在等待事件，比如用戶交互。假如你點擊一個按鈕或者在輸入框里輸入東西，事件的回調函數就會在javascript解釋器里執行，然后你就可以做任何DOM操作，等回調函數執行完畢時，瀏覽器就會相應地對DOM做出變化。 Angular拓展了這個事件循環，生成一個angular context的執行環境。當瀏覽器接收到可以被angular context處理的事件時，$digest循環就會觸發。$digest循環是由兩個更小的循環組合起來的。一個處理evalAsync隊列，另一個處理$watch隊列，$digest將會遍歷我們的$watch隊列，通過$watch隊列來觀察我們UI中變量值是否已經發生了改變,通過$watch隊列來觀察我們UI中變量值是否已經發生了改變,通過$watch隊列來觀察我們UI中變量值是否已經發生了改變（重要的話說三遍）如果$watch隊列發生了改變，那么當$digest循環結束時，DOM相應地變化。從而實現了數據的雙向綁定。

3.3 雙向綁定原理（$apply方法）

      這時候我們又會有一個問題：什么事件可以被angular context處理呢？答案是$apply方法，我們是通過$apply方法啟動$digest循環，只要$digest循環被執行，DOM元素就會被更新,假設我們有這么一個輸入框ng-model="foo"，然后我們輸入一個f ，實際上是這么執行的$apply("foo = 'f';"),也就是ng-model指令幫我們自動調用了$apply方法。       在上面的例子中$apply方法是自動調用的，同樣我們可以人為的調用$apply方法，這將在以后的博客中介紹。同樣我們可以人為的創建$watch，然后將其添加到$watch隊列中，這也將在以后的博客中介紹

4.總結

      在本篇博客中介紹了和數據綁定相關的指令，主要介紹了ng-model，ng-bind，還用文字介紹了數據的雙向綁定是如何實現的。