Detailed explanation of angular's $watch method-H5 Tutorial-php.cn

Detailed explanation of angular's $watch method

一个新手

Release： 2017-10-06 10:40:07

Original

2107 people have browsed it

Dirty check is mentioned in the $apply method. First, the apply method will trigger the evel method. When the evel method is parsed successfully, the digest method will be triggered, and the digest method will trigger the watch method.

(1)$watch introduction

When digest is executed, if the value observed by watch is different from the last execution, it will be triggered.

The watch inside AngularJS realizes the timely updating of the page with the model.

The $watch method is mainly used to manually monitor an object, but an event is triggered when the object changes.

(2)watch method usage

$watch(watchFn,watchAction,deepWatch)

watchFn: string of angular expression or function

watchAction (newValue, oldValue, scope): watchFn will be called when it changes

deepWatch: Optional Boolean value command checks whether each attribute of the monitored object changes

$watch will return A function. If you want to log out this watch, you can use the function

(3) Example

In the previous example, when the name form changes 30 times, an event is triggered.

The controller code is as follows:

var firstController = function ($scope){
    $scope.n
ame=&#39;张三&#39;;
        $scope.count=0;
    
    // 监听一个model 当一个model每次改变时 都会触发第2个函数
    $scope.$watch(&#39;name&#39;,function(newValue,oldValue){
 
        ++$scope.count;
 
        if($scope.count > 30){
            $scope.name = &#39;已经大于30次了&#39;;
        }
    });
 
}

Copy after login

html code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <p ng-app="">
 
        <p ng-controller="firstController">
            <input type="text" value="" ng-model="name"/>
 
            改变次数:{{count}}-{{name}}
        </p>
    </p>
    <script type="text/javascript" src="app/index.js"></script>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
</body>
</html>

Copy after login

##The running effect is as follows:

The first 30 times are OK Modify at will:

Detailed explanation of angulars $watch method

When modified 30 times, the name is fixed to 'more than 30 times':

Detailed explanation of angulars $watch method

This is the role of watch. Every time the model changes, the second function will be triggered.

(4)The third parameter of watch

When monitoring is an object or array, for example:

$scope.data = {
        name :&#39;李四&#39;,
        count:20
    }

Copy after login

at this time Both name and count in data need to be monitored, so you can write like this:

    $scope.$watch(&#39;data&#39;,function(){
 
    },true)

Copy after login

1
2
3

If you do not add the third parameter, then only data will be monitored, and it will only be triggered when the data reference changes.

So when you need to monitor some reference objects, you need to set the third parameter to true.

The above is the detailed content of Detailed explanation of angular's $watch method. For more information, please follow other related articles on the PHP Chinese website!