AngularJS1.X版本雙向綁定九問

前言

因爲工做的緣由，使用angular1.x版本已經有一段時間了，雖然angualr2升級後就徹底重構了，但每一個版本存在也有必定的道理。話很少說，進入正題。

1.雙向綁定的原理是什麼？

AngualrJS的雙向綁定基於髒檢查機制，$scope上有一個監聽隊列，每當向視圖上綁定一個值，就會向watch list中插入一個watch，當遇到能夠被Angular context處理的事件，就會觸發$digest循環，遍歷全部的watch，更新DOM。

2.什麼操做會觸發$digest循環？

UI發生變化，ajax請求，ng-click,$timeout...

3.若是一個watch中又包含一個watch，該watch中對應的scope model發生了變化，這種狀況是怎麼處理的呢？

$digest循環並非只運行一次的，一旦angualar運行整個$watch列表，若是任何值發生改變，應用程序將回退到$watch循環，直到它檢測到沒有任何更改。

4.如上所述，若是有值發生變化就回退到watch循環，這樣會形成死循環嗎？

不會，若是循環運行超過十次，angular會拋出異常，應用程序就會死掉。

5.以下代碼，ng-click事件什麼都沒有作，會有髒檢查嗎？

<button ng-click="">click</button>
複製代碼

會。

6.隱藏的元素，會檢查綁定在它上面的表達式嗎？

會。

7.重複的表達式會重複檢查嗎？

會。
關於以上三個問題的總結，一個綁定表達式只要放在當前 DOM 樹裏就會被監視，無論它是否可見，無論它是否被放在另外一個 Tab 裏，更無論它是否與用戶操做相關。

8.$apply與$digest的區別

$apply會從rootScope上調用$digest

9.什麼狀況下手動調用$apply？

大體想到兩種場景

• 自定義指令，綁定到$scope上的數據，更新DOM
• setTimeout的回調函數中涉及對$scope上的數據進行操做，要更新對應的視圖。（將setTimeout改爲$timeout的話，就不用手動調用$scope.$apply了）

後記

第一次在掘金上寫文，若有寫的不正確的地方，歡迎留言討論。另附一篇文章The-Digest-Loop-and-apply