Home > Article > Web Front-end > Detailed explanation of angular's $watch method

Detailed explanation of angular's $watch method

一个新手Original: 2017-10-06 10:40:072113browse

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;;
        }
    });
 
}

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>

##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
    }

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)

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：h5 avatar image rotation css3 precisely controls the position of each imageNext article：h5 avatar image rotation css3 precisely controls the position of each image

See more

Detailed explanation of angular's $watch method

Related articles