浅谈Angular.js中使用$watch监听模型变化


Posted in Javascript onJanuary 10, 2017

$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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
node.js实现快速截图
Aug 27 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 #Javascript
js实现背景图自适应窗口大小
Jan 10 #Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 #Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 #Javascript
ajax实现动态下拉框示例
Jan 10 #Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
You might like
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
React组件的三种写法总结
2017/01/12 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python实现批量压缩图片
2018/01/25 Python
python异常处理try except过程解析
2020/02/03 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
上班玩游戏检讨书
2014/02/07 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
汽车转让协议书范本
2014/12/07 职场文书
优秀高中学生评语
2014/12/30 职场文书
2015年工商所工作总结
2015/05/21 职场文书
亮剑观后感500字
2015/06/05 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
redis数据结构之压缩列表
2022/03/21 Redis
Java对文件的读写操作方法
2022/04/29 Java/Android