浅谈Angular.js中使用$watch监听模型变化
更新时间：2017年01月10日 10:11:27 作者：袁克强
当angular数据模型发生变化时，我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化，有兴趣的可以了解一下
$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使用Md5加密的解决方法,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了AngularJS实现动态添加Option的方法,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下2017-05-05
AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料，需要的朋友可以参考下。2017-07-07
在AngularJs中我们会不可避免的使用第三方库，这篇文章主要介绍了如何在AngularJs中调用第三方插件库，有兴趣的可以了解下2017-05-05
Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。2021-05-05
AngularJs定时器$interval 和 $timeout详解
这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了Angular4中常用管道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要给大家介绍了Angular.JS通过指令操作DOM的方法，文中给出了详细的介绍和示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
最新评论