$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. Good Bye 2015 D. New Year and Ancient Prophecy

    D. New Year and Ancient Prophecy time limit per test 2.5 seconds memory limit per test 512 megabytes ...

  2. myfocus官方网站已经挂掉，相关下载已经从googlecode转到网盘

    首先说,我跟作者没有任何关系,只是偶然发现这个东西,努力了1个多小时才有下载,现在友情提供出来. 其次,我找到的是v2.0.4 MS这个是最新的版本,更新日期是2012年10月. 再次,本文原本是准备 ...

  3. C# 中的委托和事件（转载）

    引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...

  4. CentOS 6.5 安装HDFS集群(Hadoop-2.7.3)

    安装真实集群,而不是但节点或者伪分布式,以3个节点为例,node1为NameNode和SecondNameNode,node2和node3为DataNode. 1.3台机器的配置必须要一模一样,只需要 ...

  5. mac_snailSVN

    作者:潘捷链接:https://www.zhihu.com/question/19705164/answer/119484169来源:知乎著作权归作者所有,转载请联系作者获得授权. Mac下之前也有类 ...

  6. 通过GCC编译器编译c语言

    GCC编译C源代码的四个步骤 GCC编译C源代码有四个步骤:预处理---->编译---->汇编---->链接. 可以利用GCC的参数来控制执行的过程,这样就可以更深入的了解编译C程序 ...

  7. NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

    今天调试SSM框架项目后台JSOn接口,报出来一个让人迷惑的错误:NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config 上网查了一下别人的博 ...

  8. HTML5 canvas处理图片的各种效果，包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

  9. 2016 icpc-ec-final

    一不小心惨变旅游队,不过上海的风景不错 顺带找其他队交流一下集训经验...或许可以成为选拔和集训16级的依据 A.直接模3就可以了,2^(3*n)%7=1 L.每场比赛3种情况,穷举就可以了 D.刚开 ...

  10. 一位程序员如何修炼成CTO

    几乎整个互联网行业都缺CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找CTO的需求,嗯,算下来超过两位数了,光最近一个月就有3个,而且这三家都是刚拿了A轮的. ...