angular之$watch方法详解

当$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破好肆意改动:

图片 1

当修改了30潮后,name固定啊’已经不止30不良了’:

图片 2

立即就是是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。

相关文章