博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS之watch
阅读量:5317 次
发布时间:2019-06-14

本文共 1938 字,大约阅读时间需要 6 分钟。

简介

    首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。

    在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发。

    AngularJS内部的watch实现了页面随model的及时更新。

    $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件。】

语法

    $watch(watchFn,watchAction,deepWatch)

        watchFn:该参数是一个带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular 表达式,那么它将会针对调用它的那个作用域中的对象而执行。

     watchAction(newValue,oldValue,scope):这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn 的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。

        deepWatch:如果设置为true,这个可选的布尔型参数将会命令Angular 去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular 需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。

    $watch会返回一个函数,想要注销这个watch可以使用函数.
  var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());  dereg();

用法 

watch简单数据类型

m1.controller("ng-watch",["$scope",function($sc){ $sc.num = 0; $sc.count = 0; $sc.preVal = ""; $sc.val = ""; $sc.$watch("num",function(newValue,oldValue){ if(newValue!==oldValue){ $sc.preVal = oldValue; $sc.val = newValue; $sc.count++; } }); }]);

watch对象

{
{'变化前的值-'+preObj}}
{
{'变化后的值-'+obj}}
m1.controller("ng-watch2",["$scope",function($sc){ $sc.o = {"num": 0}; $sc.count = 0; $sc.preObj = ""; $sc.obj = ""; $sc.$watch('o',function(newValue,oldValue){ if(newValue!==oldValue){ $sc.preObj = oldValue; $sc.obj = newValue; $sc.count++; } },true); }]);

效果:http://runjs.cn/detail/vnlh0eny

转载于:https://www.cnblogs.com/zhx1991/p/4580868.html

你可能感兴趣的文章
java.io.IOException: Can't read [\jre\lib\rt.jar]
查看>>
GJM : Unity3D 高通Vuforia SDK AR 开发
查看>>
cron表达式举例
查看>>
[bzoj1087] [SCOI2005]互不侵犯King
查看>>
谷歌站长指南:如何轻松恢复被黑客入侵的网站
查看>>
个人每日总结12
查看>>
【转】 Pro Android学习笔记(八三):了解Package(2):包签名过程
查看>>
javax.el.PropertyNotFoundException: Property 'imgUrl' not found on type java.lang.String
查看>>
Java工具类DateFormatUtils详解
查看>>
Android:有关下拉菜单导航的学习(供自己参考)
查看>>
隐式接口和编译期多态
查看>>
POJ 3278 The merchant
查看>>
天使之城(codevs 2821)
查看>>
创建Git本地仓库
查看>>
前端日常开发常用功能系列之数组去重
查看>>
COJ 1081: 集训队分组
查看>>
序列化与反序列化
查看>>
android 获得root权限解密
查看>>
MarkDown基本语法速记
查看>>
TCP连接创建与终止
查看>>