angular之$watch() $watchGroup()和$watchCollection()
2024-08-31 06:54:24
$watch
$watch主要是用来监听一个对象,在对象发生变化时触发某个事件。
用法:
$scope.$watch(watchFn,watchAction, deepWatch)
接下来讲一下这几个参数:
参数 | 说明 |
---|---|
watchFn | angular表达式或函数的字符串 |
watchAction(newValue,oldValue,scope) | watchFn发生变化会被调用 |
deepWatch | 可选的布尔值命令检查被监控的对象的每个属性是否发生变化 |
注意:deepWatch为布尔值,true时可以用来监测对象,false一般是用来监测个别元素。watchFn一般是在html中的ng-model标签。
举个例子:
<body ng-controller="MainCtrl">
<input ng-model="user.name" />
Name updated: {{updated}} times.
</body>
app.controller('MainCtrl', function($scope) {
$scope.user = { name: "Fox" }; $scope.updated = 0; $scope.$watch('user', function(newValue, oldValue) {
if (newValue === oldValue) { return; }
$scope.updated++;
}, true); //必须有true
});
$watch默认情况下是比较两个对象所引用的是否相同,当我们在监听$scope.user时,如果改变$scope.user.name时,对$scope.user的引用是不会改变的,此时检测不到值的变化。但是在$watch中加入第三个参数为true时,就能每次去比较对象的值而不是引用。
$watchGroup()和$watchCollection()
由于watch()深比较性能较差,angular还提供了$watchGroup([watchExp], listener)和$watchCollection(obj, listener) 方法来分别监听数组和对象。
$watchGroup:
其实是使用watch监听一组watchExp,所以watchGroup不支持深比较
$watchCollection:
比$watch进一步,但是基于性能考虑它只向内关注1层,对数组重新赋值,或是对数组元素进行新增、删除、修改时,回调会被调用,注意只要是修改就会调用,如果给数组赋的值和之前一样也会触发回调。如果某个数组元素内部的某个属性被更新时,回调不会被调用。
看个例子:
<div ng-controller="ctrl"> <!-- $watch -->
<div>
<input type="text" ng-model="value1"/>
</div>
<div ng-bind="w1"></div> <!-- $watchGroup -->
<div>
<input type="text" ng-model="value2"/>
<input type="text" ng-model="value3"/>
</div>
<div ng-bind="w2"></div> <!-- $watchCollection -->
<ul>
<li ng-repeat="v in arr" ng-bind="v"></li>
</ul>
<div ng-bind="w3"></div>
</div>
angular.module('myApp', [])
.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) { // $watch
var watcher = $scope.$watch("value1", function (newVal, oldVal) {
$scope.w1 = "$watch--" + "new:" + newVal + ";" + "old:" + oldVal;
if (newVal == 'clear') {//设置一个注销监听的条件
watcher(); //注销监听
}
}); // $watchGroup
$scope.$watchGroup(["value2", "value3"], function (newVal, oldVal) {
//注意:newVal与oldVal都返回的是一个数组
$scope.w2 = "$watchGroup--" + "new:" + newVal + ";" + "old:" + oldVal;
}); // $watchCollection
$scope.arr = ['nick', 'ljy', 'ljj', 'zhw'];
$scope.$watchCollection('arr', function (newVal, oldVal) {
$scope.w3 = "$watchCollection--" + "new:" + newVal + ";" + "old:" + oldVal;
});
$timeout(function () {
$scope.arr = ['my', 'name', 'is', 'nick'];
}, 2000);
}]);
最新文章
- 搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 (1)
- Spring JavaMail发送邮件
- Mysql 之旅开始啦
- Redis中统计各种数据大小的方法
- 在Windows7下启动MongoDB服务的解决方案
- 录制简单的自动化测试工具SlikMobile初体验
- web安全测试工具的局限性
- automapper初步
- SQL连接查询的方式
- float right 换行bug
- Java RMI 学习笔记
- 《Effective C++》Item2:尽量以const,enum,inline替换#define
- .net mvc mssql easyui treegrid
- SAN &; vSAN &; vSAN storage
- MeshCollider双面化脚本
- Docker rancher 部署
- Java之视频读取IO流解帧实施方案
- linux之ab压力测试工具
- Entity Framework Plus
- centos7添加bridge-nf-call-ip6tables出现No such file or directory
热门文章
- 死磕salt系列-salt 配置文件管理
- ZOJ1081 Points Within
- session.upload_progress.enabled开启的问题
- 4.12 Spark环境更新
- Spring(五)之Bean定义继承和依赖注入
- wepy build 错误 [Error] 未发现相关 less 编译器配置,请检查wepy.config.js文件。
- Linux Ubuntu出去看看
- initUrl方法
- 【CSS3基础-Flex布局】
- 微服务前端开发框架React-Admin