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

  • 相关阅读:
    《代码阅读方法与实践》阅读笔记之二
    《代码阅读方法与实践》阅读笔记一
    专业实训题目需求分析
    阅读计划
    第二阶段Sprint10
    第二阶段Sprint9
    第二阶段Sprint8
    第二阶段Sprint7
    第二阶段个人工作总结(8)
    第二阶段个人工作总结(7)
  • 原文地址:https://www.cnblogs.com/Pikzas/p/8982690.html
Copyright © 2011-2022 走看看