1.背景介紹
Angular實現了雙向綁定機制
所謂的雙向綁定，無非是從界面的操作能反映到數據稚配，數據的變更能實時展現到界面畅涂。
2.知識剖析
一，如何綁定
如果我們自己實現雙向數據綁定該怎么寫?大家可以自己嘗試寫一下道川，使用原生實現雙向綁定午衰，我的demo如下立宜。
二，MVVM
眾所周知臊岸，angular是一個MVVM（Model-View橙数，View-Model）模式的框架，可以實現數據和視圖數據綁定帅戒。MVVM把數據加工的任務從Controller中解放了出來灯帮。使得Controller只需專注于數據調配的工作。
View是angularjs編譯html后呈現出來的逻住，需要編譯的是controller中的定義的屬性和方法以及directive中定義的指令钟哥。View和controller是獨立開來的，他們之間的紐帶就是圖中間的膠水——scope瞎访。
Controller負責向scope中提供屬性和方法腻贰，便于和view層面的html進行交互。
三扒秸，如何實現
Angular雙向綁定通過$watch,$digest播演，$apply實現的。
a.watch序列
watch監(jiān)控model中是否有變化鸦采，會記錄last值宾巍，也就是改變后的值，每一個model都會增加一個watch到watch隊列中渔伯。
b.digest循環(huán)
當瀏覽器接收到可以被angular context處理的事件時顶霞，$digest循環(huán)就會觸發(fā)，這個循環(huán)有兩個子循環(huán)锣吼，一個處理evalAsync隊列选浑，另一個處理watch隊列，$digest會遍歷$watch,然后詢問：
既然所有的$watch都檢查完了玄叠，那就要問了：有沒有$watch更新過古徒？如果有至少一個更新過，這個循環(huán)就會再次觸發(fā)读恃，直到所有的$watch都沒有變化隧膘。這樣就能夠保證每個model都已經不會再變化。記住如果循環(huán)超過10次的話寺惫，它將會拋出一個異常疹吃，防止無限循環(huán)。 當$digest循環(huán)結束時西雀，DOM相應地變化萨驶。
這個就是所謂的dirty-check，angular實際會引入了一個初始值為false的dirty變量作為循環(huán)條件艇肴，如果有改變過（也就是新舊值不相等）腔呜，dirty變?yōu)閠rue叁温，循環(huán)繼續(xù)。這里很重要的（也是許多人的很蛋疼的地方）是每一個進入angular context的事件都會執(zhí)行一個$digest循環(huán)核畴，也就是說每次我們輸入一個字母循環(huán)都會檢查整個頁面的所有$watch膝但。
c.$apply
那是什么決定一個事件是否進入angular context呢？
答案是$apply
我之前碰到過在angular中使用普通的事件膛檀，無法雙向綁定的事情锰镀。
app.directive('clickable', function() {
return {
restrict: "E",
scope: false,
template: '
{{foo}}
{{bar}}
',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
});
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.foo = 0;
});
這里值雖然改變了，但是沒有強制執(zhí)行$degest,監(jiān)視foo和bar的watch根本沒有執(zhí)行咖刃，執(zhí)行一次apply之后泳炉，watch就會知道這些變化，更新dom了嚎杨。這里只需要加上scope.$apply()就行了花鹅。一般帶ng的事件angular都會給你自動添加好了apply，所以你要操縱事件的時候加上aplly才能實現數據輸出到view層中枫浙。
3.常見問題
$digest和$apply有何區(qū)別刨肃？干嘛不直接使用$digest?
4.解決方案
1.$apply可以帶參數，它可以接受一個函數箩帚，然后在應用數據之后真友，調用這個函數。
2.當調用$digest的時候紧帕，只觸發(fā)當前作用域和它的子作用域上的監(jiān)控盔然，但是當調用$apply的時候，會觸發(fā)作用域樹上的所有監(jiān)控是嗜。詳情見如下demo愈案。
5.更多討論
angular context是什么？
6.參考文獻
1.view和controller的那些事兒
2.Angular沉思錄（一）數據綁定
3.理解$watch 鹅搪，$apply 和 $digest --- 理解數據綁定過程
7.鳴謝
謝謝大家觀看
BY : 劉天云 |李維文
PPT鏈接：https://ptteng.github.io/PPT/PPT/JS-08-AngularBind.html#/
視頻鏈接：
技能樹.IT修真院
“我們相信人人都可以成為一個工程師丽柿，現在開始恢准，找個師兄，帶你入門甫题，掌控自己學習的節(jié)奏顷歌，學習的路上不再迷茫”幔睬。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線芹扭，學習透明化麻顶，成長可見化赦抖，師兄1對1免費指導「ㄉ觯快來與我一起學習吧 队萤！
