$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. DataGridView

    一.实现CheckBox列. 1.1 增加CheckBox列: 在DataGridView中增加CheckBox列: 注意:设置ColumnType类型和设置FalseValue为0,TrueValu ...

  2. Nim Game

    简单规律: 如果你面前的石子数为1,2,3必赢 4必输: 所以4+1(5),4+2(6),4+3(7)你必赢,因为你总是有办法让对方面对4,而前面分析过了4是必输的: 所以当你面对n的时候,如果n-1 ...

  3. abrt-hook-ccpp: Saved core dump of pid 12224导致dn挂掉问题

    一.引言: 最近发现datanode老是无缘无故的进程挂掉,从程序的日志没有stop迹象,只能从/var/log/messages入手,发现如下信息: 从namenode的页面也可以看到进程消息的时间 ...

  4. ubuntu14.04设置静态ip

    1. 找到文件并作如下修改: sudo vim /etc/network/interfaces 修改如下部分: auto eth0 iface eth0 inet static address 192 ...

  5. Ajax开发中服务端Response的Content-Type

    转自http://www.cnblogs.com/hyl8218/archive/2010/03/10/1681484.html ajax开发中在请求服务器端的响应时, 对于每一种返回类型 规范的做法 ...

  6. java ide 导出可运行jar包

    常常会用到写个jar搬到其他地方运行的情况,这里做个笔记记录下如何利用eclipse或者idea导出jar. 导出jar包最好的方式个人认为是把依赖的包都打包进目标jar,这样一个jar可以很happ ...

  7. 一个ubuntu phper的自我修养（ubuntu安装）

    ubuntu安装篇 一.ubuntu下载 到ubuntu官网下载适合自己电脑配置的系统版本,此处不做展开. 二.制作USB启动盘 在windows下制作USB启动盘,工具是universal usb ...

  8. 95、Jenkins部署.net持续集成自动化测试环境

    ##目录 1. 安装Jenkins 1. 配置Jenkins 1. 自动编译 1. 自动部署 1. 自动测试 环境介绍: web服务器机器:192.168.1.7 svn服务器:192.168.1.5 ...

  9. 简单利用Scanner对文件进行解析

    public class AvPrice{    static int count = 0;    static int sum = 0;    public static void main(Str ...

  10. python 最大公约数

    求解两个整数(不能是负数)的最大公约数(要求两数不能同时为0)当两数都是0时,最大公约数为0方式一:穷举法 def GCU(m, n): if not m: return n elif not n: ...