Angular JS 中的内置方法之$watch

在$apply方法中存在脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。

$watch(watchFn,watchAction,deepWatch)

watchFn: angular表达式或函数的字符串

watchAction(newValue,oldValue,scope): watchFn发生变化会被调用

deepWatch:可选的布尔值 检查被监控的对象的每个属性是否发生变化

$watch会返回一个函数,想要注销这个watch可以使用函数

例如,实现一个当修改用户名超过五次就报警提示的功能

需要注意的是,$watch 仅仅作为一个监视器的存在,不能阻止你继续修改input内的值。

angular.module('MyApp',[])
.controller('ParserController',function($scope){
    $scope.count = 0;
    $scope.$watch('name',function(newVal,oldVal){
        ++$scope.count ;
        if($scope.count > 5){
            alert("hahaha")
        }
    });
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <script src="../../src/angular.js"></script>
    <script src="parser.js"></script>
</head>
<body ng-app="MyApp">
    <div ng-controller="ParserController">
        <input ng-model="name">
    </div>
</body>
</html>

如果监听的是一个对象,而不是一个普通的数值或字符串,那么需要将第三个参数设置为true,这时候才会完全对比前后两次修改的对象是否内容改变,而不是引用改变才触发监听事件。

原文地址:https://www.cnblogs.com/Pikzas/p/8982690.html