在$apply方法中提到過臟檢查，首先apply方法會觸發evel方法，當evel方法解析成功后，會去觸發digest方法，digest方法會觸發watch方法。
(1)$watch簡介
在digest執行時，如果watch觀察的的value與上一次執行時不一樣時，就會被觸發。
AngularJS內部的watch實現了頁面隨model的及時更新。
$watch方法在用的時候主要是手動的監聽一個對象，但對象發生變化時觸發某個事件。
(2)watch方法用法
$watch(watchFn,watchAction,deepWatch)
watchFn:angular表達式或函數的字符串
watchAction(newValue,oldValue,scope):watchFn發生變化會被調用
deepWatch：可選的布爾值命令檢查被監控的對象的每個屬性是否發生變化
$watch會返回一個函數，想要注銷這個watch可以使用函數
(3)例子
在前面的例子中，當name的表單改變30次，然后觸發某個事件。
控制器代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
firstController =
function
($scope){
$scope.name=
'張三'
;
$scope.count=0;
// 監聽一個model 當一個model每次改變時 都會觸發第2個函數
$scope.$watch(
'name'
,
function
(newValue,oldValue){
++$scope.count;
if
($scope.count > 30){
$scope.name =
'已經大於30次了'
;
}
});
}
|
html代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
>
<
div
ng-app
=
""
>
<
div
ng-controller
=
"firstController"
>
<
input
type
=
"text"
value
=
""
ng-model
=
"name"
/>
改變次數:{{count}}-{{name}}
</
div
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"app/index.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"../../vendor/angular/angularjs.js"
></
script
>
</
body
>
</
html
>
|
運行效果如下：
前30次可以隨意修改：
當修改了30次后，name固定為'已經大於30次了'：
這就是watch的作用，model每一次改變時都會觸發第二個函數。
(4)watch的第三個參數
當監聽的為一個對象或者數組時，例如：
|
1
2
3
4
|
$scope.data = {
name :
'李四'
,
count:20
}
|
此時data里的name和count都要監聽，那么可以這么寫：
|
1
2
3
|
$scope.$watch(
'data'
,
function
(){
},
true
)
|
如果不加第三個參數，那么只會監聽data，只有當data引用改變時才會觸發。
因此當需要監聽一些引用對象需要把第三個參數設置成true。