对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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
Js面试算法详解
Apr 08 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php设计模式之单例模式代码
2016/06/11 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
让您的菜单不离网站
2006/10/03 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python实现人脸识别代码
2017/11/08 Python
基于Python实现用户管理系统
2019/02/26 Python
详解python和matlab的优势与区别
2019/06/28 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Django celery异步任务实现代码示例
2020/11/26 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
个人自荐信
2013/12/05 职场文书
先进集体获奖感言
2014/02/13 职场文书
喝酒检查书范文
2014/02/23 职场文书
操行评语大全
2014/04/30 职场文书
小学师德师风整改措施
2014/10/27 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis