现在我想在页面上显示一个变量i，i的初始值是0，我希望通过controller每1秒给i加1，使得在页面上i从0，1，2，3，4……一直增长，我会这么做：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
script
type
=
"text/javascript"
>
/**
* Module
*
* Description
*/
angular.module('app', []).controller('firstController',
function($scope) {
$scope.i = 0;
setInterval(function() {
$scope.i++;
}, 1000);
});
</
script
>
|
然而这样是没用的，因为i虽然变了，但是没人通知view，页面上的i还是0，不会增长。需要用到apply方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
script
type
=
"text/javascript"
>
/**
* Module
*
* Description
*/
angular.module('app', []).controller('firstController',
function($scope) {
$scope.i = 0;
setInterval(function() {
$scope.$apply(function() {
$scope.i++;
});
}, 1000);
});
</
script
>
|
Angular知道变量改变是通过脏检查实现的，脏检查就是将原对象复制一份快照，在某个时间，比较现在对象和快照的值，如果不一样就是发生了变化。Angular不会脏检查所有对象，当对象被绑定到html中，这个对象才被添加为检查对象。也不会检查所有属性，当属性被绑定时，才会列为检查的属性。
所有ng开头的事件执行时，都会触发脏检查。而这里自己写的firstController中每次循环执行函数结束后，显然没有触发脏检查。$apply方法就是手动触发脏检查，$apply仅仅是进入angular context，然后通过$digest去触发脏检查。$digest方法负责所属的scope和子scope的脏检查，脏检查又会触发$watch方法。
$apply()的定义为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$apply:
function
(expr) {
try
{
beginPhase(
'$apply'
);
return
this
.$eval(expr);
}
catch
(e) {
$exceptionHandler(e);
} finally {
clearPhase();
try
{
$rootScope.$digest();
}
catch
(e) {
$exceptionHandler(e);
throw
e;
}
}
}
|
在$digest执行时，如果watch观察到的value和上次的不一样，就会触发$watch方法。
$watch(watchExp,watchAction,deepWatch)
watchExp指明要监听的对象，如果watchExp变了，就会执行watchAction，deepWatch得举个例子解释。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<
html
ng-app
=
"app"
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
head
>
<
body
>
<
div
ng-controller
=
"firstController"
>
<
p
ng-bind
=
"i"
></
p
>
<
input
type
=
"text"
ng-model
=
"abc['name']"
>
<
input
type
=
"text"
ng-model
=
"abc['age']"
>
</
div
>
<
script
src
=
"http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
angular.module('app', []).controller('firstController',
function($scope) {
$scope.i = 0;
$scope.abc={
'name':'Pomelo',
'age':21
}
$scope.$watch('abc',function(newValue,oldValue){
$scope.i++;
},true);
});
</
script
>
</
body
>
</
html
>
|
在watchExp是个数组时，deepWatch设置为true，只要这里abc中的name或者age变了，都算数组abc变化，如果deepWatch设置为false，改变name或者age，abc都没有变，不会执行watchAcion。上面这段代码是只要name或者age改变，i就自增1。
