浅谈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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
Node.js返回JSONP详解
May 18 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
vue.js实现简单的计算器功能
Feb 22 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python求绝对值的三种方法小结
2019/12/04 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
python 制作磁力搜索工具
2021/03/04 Python
工程质量月活动方案
2014/02/19 职场文书
技术比武方案
2014/05/19 职场文书
珍惜资源的建议书
2014/08/26 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
python实现商品进销存管理系统
2022/05/30 Python