浅谈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 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
原生javascript获取元素样式
Dec 31 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
利用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 注释规范
2012/03/29 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP实现图片压缩
2020/09/09 PHP
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
人事主管的岗位职责
2013/11/16 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
环保主题班会教案
2015/08/13 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python