对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 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
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
基于pear auth实现登录验证
2010/02/26 PHP
php中filter_input函数用法分析
2014/11/15 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
银行学习十八大感想
2014/01/11 职场文书
给领导的检讨书
2014/02/16 职场文书
爱国口号
2014/06/19 职场文书
个人收入证明范本
2015/06/12 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
2019大学生实习报告
2019/06/21 职场文书