$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);

监测多个属性

贴出一个具体的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用法的更多相关文章

  1. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  4. 转：AngularJS的Filter用法详解

    Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...

  5. AngularJS的Filter用法详解

    上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...

  6. AngularJS 'Controller As'用法

    AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...

  7. angularjs之Restangular用法

    参考资料: angularjs 获取服务端口数据的方法(三种) 学习-[前端]-angularjs基本框架以及向服务器发送请求的方法 Restangular on Angular

  8. angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...

  9. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  10. 关于angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...

随机推荐

  1. php中环境变量

    $_ENV $_ENV是一个包含服务器端环境变量的数组.它是PHP中一个超级全局变量,我们可以在PHP 程序的任何地方直接访问它.   $_ENV只是被动的接受服务器端的环境变量并把它们转换为数组元素 ...

  2. 提供在线制作icon的网站

    http://www.ico.la/ http://www.makeico.com/ http://free.logomaker.cn/tools/icoMaker.aspx http://ico.5 ...

  3. sql数据库不能用localhost/phpMyadmin登陆，真正要修改的文件是哪个

    今天,数据库抽风,在地址栏输入localhost/phpmyadmin尽然显示没有访问权限的英文....查了资料都是有好多解决方案,基本都是先点击绿色的w图标,然后找到apache下的httpd.co ...

  4. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...

  5. laravel框架总结(十二) -- 关联关系

    这里我们users表对应的模型类名是users,大家特意注意下和user取名的不同 1.一对一关系 1>表A和表B的记录一一对应,比如一个用户对应一个社交账号 数据表的设计如下:   2> ...

  6. JMeter入门使用指南

    初识JMeter 最近开始接触和使用JMeter进行性能测试,也是因为工作需要,不得不学习更多新技能,在此之前一直使用LR进行WEB系统的压力测试,但是在ZK开发的WEB系统,我选择使用JMeter. ...

  7. OpenWrt > ADSL单线多拨，负载均衡（仅供参考）

    前题 硬件:路由器,刷入OpenWrt 一些背景知识和动手能力 目标效果图 步骤 使用SSH 登陆路由器.I.e. ssh root@192.168.2.1 运行/usr/bin/duobo.日志类似 ...

  8. TensorFlow白皮书

    TensorFlow [1] is an interface for expressing machine learning algorithms, and an implementation for ...

  9. 在Windows系统下用命令把应用程序添加到系统服务

    在Windows系统下用命令把应用程序添加到系统服务,使用SC命令. 加入服务格式如下:sc create ServiceName binPath= 程序路径 start= auto(等号后面的空格是 ...

  10. sql语句错误

    此错误一般有以下情况造成: 1.配置文件中SQL语句写的有问题 2.传参过程中没有找到sql对应的参数 解决方法: 1.检查sql语句 2.debug启动,查找与sql语句相对应的参数是否存在. 3. ...