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，这时候才会完全对比前后两次修改的对象是否内容改变，而不是引用改变才触发监听事件。

posted @ 2018-05-02 21:46  pikzas  阅读(138)  评论(0)  编辑  收藏  举报