对angular 监控数据模型变化的事件方法$watch详解
更新时间：2018年10月09日 10:58:38 作者：专注前端30年
今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$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 监控数据模型变化的事件方法$watch详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Angular5中状态管理的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了详解AngularJS中的表达式使用,包括处理数字和字符串等各种对象的操作,需要的朋友可以参考下2015-06-06
Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此，我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧2018-10-10
这篇文章主要介绍了浅谈Angular7 项目开发总结，本文在此做一次遇到问题的总结，以便知识的掌握，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要讲解AngularJs directive的知识，这里整理了相关资料及示例代码，有兴趣的小伙伴可以参考下2016-09-09
本文给大家介绍使用Angularjs实现多个页面共享数据的方式，通过定义一个共享服务service来实现此功能，对angularjs共享数据相关知识感兴趣的朋友一起学习2016-03-03
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
这篇文章主要介绍了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法,结合实例形式分析AngularJS下拉滚动插件ngInfiniteScroll的下载、功能、属性及相关使用方法,需要的朋友可以参考下2016-12-12
今天小编就为大家分享一篇angularjs $http调用接口的方式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Angular.js ng-file-upload结合springMVC的使用教程
这篇文章主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC的使用教程，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
最新评论