引言和數據綁定相關指令1 代碼實現2 代碼解釋雙向綁定是如何實現的1 雙向綁定原理watch 隊列2 雙向綁定原理digest循環3 雙向綁定原理apply方法總結
在上一篇博客中我們介紹了兩個指令，一個是ng-app，另外一個是ng-init，其中前一個是指令angularjs的作用域，第二個指令是設置angular初始化變量的，在本片博客中，我們將會介紹一下和數據綁定相關的指令，其中一個是ng-model，另外一個是ng-bind。
我們通過html輸出數據可以通過兩種方式，一種是通過表達式，一個是可以通過ng-bind指令，如何將我們的數據綁定到angularjs的變量呢？我們可以通過ng-model指令，ng-model指令可以實現雙向綁定，也就是說：如果我們通過ng-model修改了變量的值，將會直接修改到html。
input標簽，然后綁定到angular變量上<html ng-app><head> <script src="js/angular.js"></script></head><body> <input type="text" ng-model="test"><br> {{test}}<br> <div ng-bind="test"></div></body></html>運行結果
ng-model指令創建了一個變量test然后我們通過{{}}表達式，輸出了test變量我們通過標簽輸出了test變量，注意，當我們使用ng-bind指令時，實際上是添加了innerHTML屬性，如下圖所示 
ng-bind指令相對于{{}}（表達式）的優勢，當瀏覽器加載比較慢的時候，瀏覽器會出現{{}}符合，而ng-bind不會出現
在上面的程序的時候，我們肯定會有一個疑問：為什么我們輸入文本框，下面的信息會相應改變呢？也就是說雙向綁定是如何實現的？接下來我們就用文字描述一下雙向綁定是如何實現的？
$watch 隊列） 在angularjs中有一個$watch 隊列的概念，$watch 隊列中存放一系列的$watch對象，那么$watch對象是如何產生的呢？每當我們綁定數據到UI上時，會自動生成一個$watch對象，然后將$watch對象存放到$watch 隊列中，如下面的代碼：
代碼中生成了兩個變量每一個是user，一個是pass,該變量綁定到了UI上，因此會自動生成兩個$watch對象，然后存放到$watch 隊列中。
接下來我們再看第二段的代碼：
app.controller('MainCtrl', function($scope) { $scope.foo = "Foo"; $scope.world = "World";});Hello, {{ world}}這里，即便我們在$scope上添加了兩個變量，但是只有一個綁定在了UI上，因此在這里只生成了一個$watch對象。
$digest循環） 瀏覽器一直在等待事件，比如用戶交互。假如你點擊一個按鈕或者在輸入框里輸入東西，事件的回調函數就會在javascript解釋器里執行，然后你就可以做任何DOM操作，等回調函數執行完畢時，瀏覽器就會相應地對DOM做出變化。 Angular拓展了這個事件循環，生成一個angular context的執行環境。當瀏覽器接收到可以被angular context處理的事件時，$digest循環就會觸發。$digest循環是由兩個更小的循環組合起來的。一個處理evalAsync隊列，另一個處理$watch隊列，$digest將會遍歷我們的$watch隊列，通過$watch隊列來觀察我們UI中變量值是否已經發生了改變,通過$watch隊列來觀察我們UI中變量值是否已經發生了改變,通過$watch隊列來觀察我們UI中變量值是否已經發生了改變（重要的話說三遍）如果$watch隊列發生了改變，那么當$digest循環結束時，DOM相應地變化。從而實現了數據的雙向綁定。
$apply方法） 這時候我們又會有一個問題：什么事件可以被angular context處理呢？答案是$apply方法，我們是通過$apply方法啟動$digest循環，只要$digest循環被執行，DOM元素就會被更新,假設我們有這么一個輸入框ng-model="foo"，然后我們輸入一個f ，實際上是這么執行的$apply("foo = 'f';"),也就是ng-model指令幫我們自動調用了$apply方法。 在上面的例子中$apply方法是自動調用的，同樣我們可以人為的調用$apply方法，這將在以后的博客中介紹。同樣我們可以人為的創建$watch，然后將其添加到$watch隊列中，這也將在以后的博客中介紹
在本篇博客中介紹了和數據綁定相關的指令，主要介紹了ng-model，ng-bind，還用文字介紹了數據的雙向綁定是如何實現的。
新聞熱點
疑難解答
