$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

  1. watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

  2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

  3. 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);

上图:

随机推荐

  1. UEFI引导模式

    Author: JinDate: 20140827System: windows 刚帮楼下的公司解决了个问题. 原来的办公电脑,预装linux,他们重装成win7.新买的电脑预装成win8,安装出问题 ...

  2. 垃圾收集简介 - GC参考手册

    http://blog.csdn.net/column/details/14851.html

  3. 将asi-http-request引入到ARC工程需要做的 转

    在发表前,容许我发两句牢骚,太折腾了.但结合网路上各种大侠的答案相助,最终我终于可以在ARC项目使用该库了. 1.需要下载asi-http-request这个包.https://github.com/ ...

  4. 为免费app嵌入Admob广告

    为免费app嵌入Admob广告,进而获得广告收入. 1.http://www.admob.com/注册一个帐号, 添加Add Mobile Site/app,输入相关信息后,提交完成, 下载Andro ...

  5. andriod 文本居中: android:gravity="center"

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  6. 结合MapReduce和数据集Combining datasets with MapReduce

    While in the SQL-world is very easy combining two or more datasets - we just need to use the JOIN ke ...

  7. 【六】注入框架RoboGuice使用:(Singletons And ContextSingletons)

    上一篇我们简单的介绍了一下RoboGuice的使用([五]注入框架RoboGuice使用:(Your First POJO Injection)),今天我们来看下单例以及上下文单例(ContextSi ...

  8. MySQL中limit的用法

    SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset   LIMIT 子句可以被用于强制 SELECT 语句返回指定的记录数.L ...

  9. Java中使用Jedis操作Redis之二

    import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.J ...

  10. vue设置多入口教程

    官方脚手架搭建vue项目 在src 目录下复制app内容创建test.vue,demo.vue, main.js复制main.js内容demo.js,test.js,修改一下内容 在根目录下创建tes ...