AngularJS的$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);
监测多个属性
贴出一个具体的demo
<body ng-app="app" ng-controller="first">
<button ng-click="name='a'">1</button>
<button ng-click="name='b'">2</button>
<button ng-click="name='c'">3</button>
<button ng-click="type=2">4</button>
<button ng-click="type=3">5</button>
<p>{{name}}</p>
</body>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("first", function($scope) {
$scope.name = 'q';
$scope.type = 1; function te() {
console.log($scope.name+" "+ $scope.type);
}
$scope.$watch('name+type', function(newValue, oldValue) {
te();
});
})
</script>
$watch性能问题
太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。
$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：
var watch = $scope.$watch('someModel.someProperty', callback);
//...
watch();
还有2个和$watch相关的函数：
$watchGroup(watchExpressions, listener);
$watchCollection(obj, listener);
AngularJS的$watch用法的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
- 转：AngularJS的Filter用法详解
Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...
- AngularJS的Filter用法详解
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
- angularjs之Restangular用法
参考资料: angularjs 获取服务端口数据的方法(三种) 学习-[前端]-angularjs基本框架以及向服务器发送请求的方法 Restangular on Angular
- angularJS的一些用法
AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- 关于angularJS的一些用法
AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...
随机推荐
- IIS Express 配置外部访问
IIS Express是Visual Stuido自带的微型Web服务器,简单易用. IIS Express默认只允许本机访问,通过Visual Studio调试Web程序时,我们有时需要通过外部访问 ...
- Windows7下的免费虚拟机（微软官方虚拟机）
前言: 不是说windows7自带的虚拟机最好用,而是他是正式版的,免费的,只要你是windows7用户,就可以免费使用: 其实我最推荐的还是Vmware: 微软为什么提供免费的虚拟机呢? 因为vis ...
- 工作中总结的常用PHP代码
[目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递 和 引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地 ...
- ElasticSearch学习记录
中文api 什么是集群? 集群(cluster) >由一个或多个节点组织在一起. >由一个唯一的名字标识,默认为"elasticsearch". 节点(node) &g ...
- 《编写可维护的JavaScript》——JavaScript编码规范（二）
昨天是我偶像生日,现在整个人都还好兴奋啊O(∩_∩)O~ 闲话少说,让我先发篇随笔留念一下^_^ ////////////////////////////////正文分割线///////////// ...
- Java的日期工具类
package com.tech.jin.util; import java.text.DateFormat; import java.text.ParseException; import java ...
- lower函数
将大写字母变成小写 >>> a='AAABBBccc' >>> a.lower() 'aaabbbccc'
- 安装AdventureWorks2008R2
在微软的网站,有介绍安装示例数据库AdventureWorks的说明. 你可以在这里下载到压缩包 (AdventureWorks2008R2_Database.zip),解压后会得到两个文件: Adv ...
- MySQL显示中文
http://www.cnblogs.com/livingintruth/p/3433259.html 这两天在学习webpy,把webpy的一个blog例子扒下来学习一下,默认创建的table当存入 ...
- java:IO流学习小结
可以看以下内容学习一下: http://blog.csdn.net/zzp_403184692/article/details/8057693