对angular 监控数据模型变化的事件方法$watch详解


Posted in Javascript onOctober 09, 2018

$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子:

$scope.name = 'hello';
 
var watch = $scope.$watch('name',function(newValue,oldValue, scope){
  console.log(newValue);
  console.log(oldValue);
});
 
 
$timeout(function(){
  $scope.name = "world";
},1000);

$watch性能问题

太多的$watch将会导致性能问题,$watch如果不再使用,我们最好将其释放掉。

$watch函数返回一个注销监听的函数,如果我们想监控一个属性,然后在稍后注销它,可以使用下面的方式:

var watch = $scope.$watch('someModel.someProperty', callback);
//...
watch();

还有2个和$watch相关的函数:

$watchGroup(watchExpressions, listener);
$watchCollection(obj, listener);

以上这篇对angular 监控数据模型变化的事件方法$watch详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
jQuery 选择器详解
Jan 19 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
js实现图片放大展示效果
Aug 30 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
Sep 28 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
Vue slot用法(小结)
Oct 22 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
JS判断用户用的哪个浏览器实例详解
Oct 09 #Javascript
vue发送ajax请求详解
Oct 09 #Javascript
AngularJS 监听变量变化的实现方法
Oct 09 #Javascript
对angular4子路由&辅助路由详解
Oct 09 #Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 #Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 #Javascript
angularJS1 url中携带参数的获取方法
Oct 09 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
python代码制作configure文件示例
2014/07/28 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python判断正负数方式
2020/06/03 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
九年级体育教学反思
2014/01/23 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
毕业生自荐书
2014/02/03 职场文书
广告业务员岗位职责
2014/02/06 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
大学同学会活动方案
2014/08/20 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
教师考核表个人总结
2015/02/12 职场文书
法人代表证明书范本
2015/06/18 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android