那么什么是雙向綁定，下面簡單進行講解。
首先我們要理解數據綁定。我們看到的網站頁面中，是由數據和設計兩部分組合而成。將設計轉換成瀏覽器能理解的語言，便是html和css主要做的工作。而將數據顯示在頁面上，并且有一定的交互效果（比如點擊等用戶操作及對應的頁面反應）則是js主要完成的工作。很多時候我們不可能每次更新數據便刷新頁面（get請求），而是通過向后端請求相關數據，并通過無刷新加載的方式進行更新頁面（post請求）。那么數據進行更新后，頁面上相應的位置也能自動做出對應的修改，便是數據綁定。
在以前的開發模式中，這一步一般通過jq操作DOM結構，從而進行更新頁面。但這樣帶來的是大量的代碼和大量的操作。如果能在開始的時候，便已經確定好從后端獲取的數據到頁面上需要進行的操作，當數據發生改變，頁面的相關內容也自動發生變化，這樣便能極大地方便前端工程師的開發。在新的框架中（angualr，react，vue等）,通過對數據的監視，發現變化便根據已經寫好的規則進行修改頁面，便實現了數據綁定。可以看出，數據綁定是M(model，數據）通過VM（model-view，數據與頁面之間的變換規則）向V（view）的一個修改。
而雙向綁定則是增加了一條反向的路。在用戶操作頁面（比如在Input中輸入值）的時候，數據能及時發生變化，并且根據數據的變化，頁面的另一處也做出對應的修改。有一個常見的例子就是淘寶中的購物車，在商品數量發生變化的時候，商品價格也能及時變化。這樣便實現了V――M――VM――V的一個雙向綁定。
AngularJs 為 scope 模型上設置了一個 監聽隊列，用來監聽數據變化并更新 view 。每次綁定一個東西到 view(html) 上時 AngularJs 就會往 $watch 隊列里插入一條 $watch，用來檢測它監視的 model 里是否有變化的東西。當瀏覽器接收到可以被 angular context 處理的事件時，$digest 循環就會觸發。$digest 會遍歷所有的 $watch。從而更新DOM。
$watch
這有點類似于我們的觀察者模式，在當前作用域$scope下，我們創建一個監控器$watchers和一個監聽器$watch，$watchers 負責管理所有的 $watch，當我們每次綁定到UI上的時候就<font color=red>自動</font>創建一個$watch，并把它放到 $watchers。
controller.js
app.controller('MainCtrl', function($scope) { $scope.Hello = "Hello"; $scope.world = "World";});index.html
<div>{{Hello}}</div>這里，即便我們在$scope上添加了兩個變量，<font color=red>但是只有一個綁定在了UI上，因此在這里只生成了一個$watch</font>
$digest
當瀏覽器接收到可以被angular context處理的事件時，$digest循環就會觸發。$digest將會遍歷我們的$watch，如果$watch沒有變化，這個循環檢測就將停止，如果有至少一個更新過，這個循環就會再次觸發，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經不會再變化。這就是臟檢查(Dirty Checking)機制
controller.js
app.controller('MainCtrl', function() { $scope.name = "Foo"; $scope.changeFoo = function() { $scope.name = "Bar"; }});index.js
<div>{{ name }}</div><button ng-click="changeFoo()">Change the name</button>$apply
$apply 我們可以直接理解為刷新UI。<font color=red>如果當事件觸發時，你調用$apply，它會進入angular context，如果沒有調用就不會進入，之后的$digest檢測機制就不會觸發</font>
app.directive('clickable', function() { return { restrict: "E", scope: { foo: '=' }, template: '<ul style="background-color: lightblue"><li>{{foo}}</li></ul>', link: function(scope, element, attrs) { element.bind('click', function() { scope.foo++; console.log(scope.foo); }); } }});當我們調用clickable指令的時候，我們可以看到foo的值增加了，但是界面上顯示的內容并沒有改變。$digest臟檢測機制沒有觸發，檢測foo的$watch就沒有執行。
$apply()方法的兩種形式
1) 無參
$scope.$apply();
element.bind('click', function() { scope.foo++; //if error scope.$apply();});當我們使用這種形式的時候，如果在scope.$apply之前程序發生異常，那scope.$apply沒有執行，界面就不會更新
2) 有參
$scope.$apply(function(){ ...})element.bind('click', function() { scope.$apply(function() { scope.foo++; });})如果用這種形式，即使后面的發生異常，數據還是會更新。
在 AngularJS 中使用 $watch
常用的使用方式：
$scope.name = 'Hello';$scope.$watch('name', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;});傳入到$watch()中的第二個參數是一個回調函數，該函數在name的值發生變化的時候會被調用。
如果要監聽的是一個對象，那還需要第三個參數：
$scope.data.name = 'Hello';$scope.$watch('data', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++;}, true);表示比較的是對象的值而不是引用，如果不加第三個參數true，在 data.name 變化時，不會觸發相應操作，因為引用的是同一引用。
總結
1) 只有在$scope變量綁定到頁面上，才會創建 $watch
2) $apply決定事件是否可以進入angular context
3) $digest 循環檢查model時最少兩次，最多10次(多于10次拋出異常，防止無限檢查)
4) AngularJs自帶的指令已經實現了$apply，所以不需要我們額外的編寫
5) 在自定義指令時，建議使用帶function參數的$apply
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
