对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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
基于vue.js实现购物车
Jan 15 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
Vue Element校验validate的实例
Sep 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
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python使用udp实现聊天器功能
2018/12/10 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
django中forms组件的使用与注意
2019/07/08 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
Java程序员综合测试题
2014/04/25 面试题
致1500米运动员广播稿
2014/02/07 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
小学教研工作总结2015
2015/05/13 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android