watcher是Angular提供的一种对变量的观察机制，如果存在数据的绑定等，则在不同的作用域中都存在相应的 watch list, 这些被观察的变量将在 digest process (后面会详讲)中得到更新，这也称之为 脏值检查。
watch 和 watch listener
在 $scope (和$rootScope) 对象上存在 $watch 函数，我们可以手动的添加watch listener, 当被观察的变量被检测到发生变化时，变量被更新，然后angularjs自动调用 watch listener.
// 观察 'a' 变量的变化
// 后面的回调函数就是 watch listener, 2个参数: newValue oldValue
$scope.$watch('a', function(newValue, oldValue) {
if (newValue != oldValue) {
$scope.b = $scope.a * 2
}
})
watches的类型
1.$watch - Reference watch 引用类型的观测
$watch 是一种引用类型的观察，只有当引用的地址发生变化时才触发，上面的代码使用原始类型，当值变化时，相应的引用也会发生变化。下面例子中 obj 是一个对象，只有 obj 引用的地址发生变化时，才会调用watch listener, 因此当 a, b, c的值发生变化时，obj引用的地址并不会发生改变，因此不会调用watch listener,这一点要注意:
$scope.obj = {
a: 1,
b: 2,
c: 4
}
// 引用观察
$scope.$watch('obj', function(newValue, oldValue) {
if ($newValue != oldValue) {
$scope.obj.c = $scope.obj.a * $scope.obj.b;
}
});
$watch with 'true' - Equality watch
同上面的例子，如果后面再添加一个 'true', 则观察的类型将变为相等性观察(也可称为deep watch)。这样对象的成员发生变化时，会自动调用watch listener
$scope.obj = {
a: 1,
b: 2,
c: 4
}
// 相等性观察
$scope.$watch('obj', function(newValue, oldValue) {
if ($newValue != oldValue) {
$scope.obj.c = $scope.obj.a * $scope.obj.b;
}
}, true);
2.$watchGroup - Reference watch for multiple variables
$watchGroup 对多个变量同时进行监测，这可以说是一种简便的写法
$scope.a =1;
$scope.b = 2;
$scope.c = 4;
// 相等性观察
$scope.$watchGroup(['a', 'b'], function(newValue, oldValue) {
if ($newValue != oldValue) {
$scope.obj.c = $scope.obj.a * $scope.obj.b;
}
});
3.$watchCollection - Collection Watch
这个是对集合元素的观测:
- 用于观测数组
- 检测数组的变化(比如添加或删除元素)
- 不检测数组item的变化(比如数组的元素为对象，对象中的内容发生变化，这并不再监察范围内， 如果希望监察这种变化，可以添加
true, 同$watch)
$scope.emps = [
{ empId: 1001, empName: 'James'},
{ empId: 1002, empName: 'Kobe'},
{ empId: 1003, empName: 'Durant'},
{ empId: 1004, empName: 'Jordan'}
];
// 如果emps数组增加元素或删除元素，则会调用watch listener
// 如果 '$scope.emps[2].empName="Harden"' 并不会调用watch listener
$scope.$watchCollection('emps', function(newValue, oldValue) {
//...
})
如果希望 '$scope.emps[2].empName="Harden"' 内容的变化调用watch listener， 则可以添加 true, 变为相等性监察
$scope.$watchCollection('emps', function(newValue, oldValue) {
//...
}, true)
示例：
// html
<div ng-controller="myCtrl">
a = {{a}} <input ng-model="a" ng-change="updateC()" />
</div>
// js
app.controller('myCtrl', function($scope) {
$scope.a = 10;
$scope.c = 1;
$scope.updateC = function() {
$scope.c = $scope.a * 2
}
$scope.watch('c', function(newValue, oldValue) {
if (newValue != oldValue) {
console.log('C updated to ' + newValue)
}
})
})
// 当我们改变 'a' 的值的时候，比如10, 'ng-change' 将调用 'updateC()'函数
// 从而改变c的值
// 然后c被检测到发生变化，watch listener调用
// 控制台显示 'C updated to 20'
值得注意的是， ng-change 指令的用法， 当a的值发生变化时，将自动的调用其绑定的函数
digest process/loop
通过上面的watch，我们知道，作用域中的可能存在watchers, 这些watcher都存在各个作用域中的 watch list中，如下图:
而 digest process 简单的来讲就是： 负责遍历整个watch list,查看变化(也称之为 dirty-checking(脏值检查))，有如下特点:
- 被观察的变量有变化，则更新变量，如果存在
watch listener, 则执行watch listener - 追踪变化，告知Angular更新DOM
- Digest Process 完成之后更新DOM
- Digest Process 运行在
Angular Context中，这是angularjs运行时环境，这个环境建立在Javascript Context上
如下图:
举个例子： watch list中的 a 变量，检测到发生了变化:
- AngularJS 进行第1次遍历，发现a有变化，更新a的值
- a如果存在watch listener, 则执行这个函数
- AngularJS再次进行遍历，查看是否又有变化，如果没有变化，则Digest process完成，更新DOM；如果又发现变化，则再次进行遍历，直到没有任何变化
如下图所示:
从图中可以看出：
- AngularJS Digest process 至少遍历2次， 最多遍历10次(超过10次抛出错误)
我们可以使用 $rootScope.watch的方法来查看初始次数:
$rootScope.watch(function() {
console.log('Digest process start');
})
// 在控制台中我们可以看到
Digest process start
Digest process start
// 这个过程执行了2次
digest process 完整过程
digest process并不会定时的触发，而是通过下图中的一些条件引起而触发：
从图中可以看出，其中几个触发条件为(在AngularJS context中):
- DOM 事件(ng-click等)
- Ajax 请求($http等)
- Timer 回调($timeout $interval)
- 浏览器地址发生变化
- 手动的调用(
$apply$digest)
Angularjs 也正是通过上面这些情形当作桥梁和浏览器产生关联的
和angular不相关的DOM事件，比如 onclick, 并不会触发digest process,而 ng-click 则会。
Angular context位于Javascript Context 中，浏览器的一些行为会影响到Angular context中的一些触发条件，从而触发digest process
$apply && $digest
这2个方法用于手动触发digest process:
- 主要用于当作用域变量在Angular Context 之外(比如使用jquery 事件， jquery ajax等)被修改，而 UI 需要刷新数据绑定
-
$apply本质上是调用$digest - 使用方法：
$scope.$apply()|$scope.$digest()
$apply
这个启动digest process的特点:
- 永远从
RootScope开始启动digest process - ng-click, $timeout, $http（ajax） 等操作，背后都会调用$apply
$digest
这个和$apply的区别:
- 从 当前作用域 (包括子作用域和嵌套作用域) 启动 digest process
- 不从RootScope或父作用域启动
- 也能够从RootScope开始东东digest process（这就相当于$apply了）
示例:
// html
<div ng-controller="MyCtrl" id="sum">
a: {{a}} <input ng-model="a" />
b: {{b}} <input ng-model="b" />
<hr />
<button ng-click="getSum()">ng-click求和</button> // 这里使用ng-click，自动触发digest process
<button ng-click="btnClick()">外部事件求和</button> // 这里使用外部DOM事件求和, 需要手动的触发digest process
<hr />
总和为: {{s}}
</div>
// js
app.controller('MyCtrl', function($scope) {
$scope.a = 10;
$scope.b = 10;
$scope.s = 0;
$scope.getSum = function() {
$scope.s = parseInt($scope.a, 10) + parseInt($scope.b, 10);
}
})
// Angular context 外部逻辑
var btnClick = function() {
var sumDiv = document.getElementById('sum');
// 找出该作用域 这里的 '$scope' 可以为任何值
var $scope = angular.element(sumDiv).scope();
$scope.s = parseInt($scope.a, 10) + parseInt($scope.b, 10);
}
仅仅这样写，点击 'ng-click求和' 将得到正确的值，但是点击 '外部事件求和' 按钮，虽然s的值会更新，但是DOM并未更新，这是我们需要使用 $scope.$apply() 手动的更新
var btnClick = function() {
var sumDiv = document.getElementById('sum');
var $scope = angular.element(sumDiv).scope();
$scope.s = parseInt($scope.a, 10) + parseInt($scope.b, 10);
$scope.$apply(); // 手动的启动digest process
}
$scope.$apply() 也可以添加一个函数，上面可以写为:
var btnClick = function() {
var sumDiv = document.getElementById('sum');
var $scope = angular.element(sumDiv).scope();
// 使用函数的形式
$scope.$apply(function() {
$scope.s = parseInt($scope.a, 10) + parseInt($scope.b, 10);
});
}
总结
这一章主要有如下内容:
- AngularJS的监察机制：watch list, watch 的分类：
$watch,$watchGroup,$watchCollection - digest process的机制
- ng-change 指令，当绑定的变量发生变化时， 调用相应的函数
- Angular Context 的概念
- 触发digest process的条件
- 手动触发digest process：
$apply(),$digest(), 两者之间的差异主要在于digest process开始的地方：$apply()从rootScope开始，而$digest()从当前scope开始，这对某些情况是有差别的
