$watch

$watch主要是用来监听一个对象，在对象发生变化时触发某个事件。 
用法：

$scope.$watch(watchFn,watchAction, deepWatch)

接下来讲一下这几个参数：

参数 说明
watchFn angular表达式或函数的字符串
watchAction(newValue,oldValue,scope) watchFn发生变化会被调用
deepWatch 可选的布尔值命令检查被监控的对象的每个属性是否发生变化

注意：deepWatch为布尔值，true时可以用来监测对象，false一般是用来监测个别元素。watchFn一般是在html中的ng-model标签。 
举个例子：

<body ng-controller="MainCtrl">

  <input ng-model="user.name" />

  Name updated: {{updated}} times.

</body>
app.controller('MainCtrl', function($scope) {

  $scope.user = { name: "Fox" };

  $scope.updated = 0;

  $scope.$watch('user', function(newValue, oldValue) {

    if (newValue === oldValue) { return; }

    $scope.updated++;

  }, true);  //必须有true

});

$watch默认情况下是比较两个对象所引用的是否相同，当我们在监听$scope.user时，如果改变$scope.user.name时，对$scope.user的引用是不会改变的，此时检测不到值的变化。但是在$watch中加入第三个参数为true时，就能每次去比较对象的值而不是引用。

$watchGroup()和$watchCollection()

由于watch()深比较性能较差，angular还提供了$watchGroup([watchExp], listener)和$watchCollection(obj, listener) 方法来分别监听数组和对象。 
$watchGroup: 
其实是使用watch监听一组watchExp,所以watchGroup不支持深比较 
$watchCollection: 
比$watch进一步，但是基于性能考虑它只向内关注1层，对数组重新赋值，或是对数组元素进行新增、删除、修改时，回调会被调用，注意只要是修改就会调用，如果给数组赋的值和之前一样也会触发回调。如果某个数组元素内部的某个属性被更新时，回调不会被调用。 
看个例子：

<div ng-controller="ctrl">

    <!-- $watch -->

    <div>

      <input type="text" ng-model="value1"/>

    </div>

    <div ng-bind="w1"></div>

    <!-- $watchGroup -->

    <div>

      <input type="text" ng-model="value2"/>

      <input type="text" ng-model="value3"/>

    </div>

    <div ng-bind="w2"></div>

    <!-- $watchCollection -->

    <ul>

      <li ng-repeat="v in arr" ng-bind="v"></li>

    </ul>

    <div ng-bind="w3"></div>

  </div>
angular.module('myApp', [])

        .controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {

          // $watch

          var watcher = $scope.$watch("value1", function (newVal, oldVal) {

            $scope.w1 = "$watch--" + "new:" + newVal + ";" + "old:" + oldVal;

            if (newVal == 'clear') {//设置一个注销监听的条件

              watcher(); //注销监听

            }

          });

          // $watchGroup

          $scope.$watchGroup(["value2", "value3"], function (newVal, oldVal) {

            //注意：newVal与oldVal都返回的是一个数组

            $scope.w2 = "$watchGroup--" + "new:" + newVal + ";" + "old:" + oldVal;

          });

          //  $watchCollection

          $scope.arr = ['nick', 'ljy', 'ljj', 'zhw'];

          $scope.$watchCollection('arr', function (newVal, oldVal) {

            $scope.w3 = "$watchCollection--" + "new:" + newVal + ";" + "old:" + oldVal;

          });

          $timeout(function () {

            $scope.arr = ['my', 'name', 'is', 'nick'];

          }, 2000);

        }]);

angular之$watch() $watchGroup()和$watchCollection()的更多相关文章

  1. angular之$watch、$watchGroup、$watchCollection

    1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须 ...

  2. angularjs--$watch、$watchGroup、$watchCollection含义

    angularjs的$watch.$watchGroup.$watchCollection使用方式   如果想在controller里面随时监听一个值的变化那就用$watch <p>    ...

  3. angular1.x + ES6开发风格记录

    angular1.x和ES6开发风格 一.Module ES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是: 把各功能模块的具 ...

  4. AngularJS 1.x 思维索引

    我们在这里不讨论Angular2和Angular4,因为其完全重写,其实已经不叫AngularJS了. AngularJS的缺陷: 性能问题:通过检查脏值进行数据更新,当数据不断增加时,检查的效率就不 ...

  5. $watch, $watchCollection, $watchGroup的使用

    官方文档 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objec ...

  6. Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...

  7. angular源码分析：angular中$rootscope的实现——scope的一生

    在angular中,$scope是一个关键的服务,可以被注入到controller中,注入其他服务却只能是$rootscope.scope是一个概念,是一个类,而$rootscope和被注入到cont ...

  8. Angular:手动脏检查/$apply/$digest和监控对象/$watch

    声明:借鉴好多chm资料.视频.PDF总结如下: 一.$apply的引入 View <div ng-app=""> <div ng-controller=&quo ...

  9. Angular - - $rootScope.Scope

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

随机推荐

  1. UVA 12230 Crossing Rivers

    嘟嘟嘟 虽然分类是期望dp,不过好像是最水的 因为在陆地上的时间和概率是固定的,所以只用考虑过河的期望时间. 对于一条河p, l, v,p好像没什么用……不管了,首先期望时间我觉得可以这么算:期望时间 ...

  2. Presentation 常用的承接句——技术分享、学术报告串联全场不尴尬

    前言 现在即使是搞技术,做科研的,也需要在不同的场合,用ppt来做分享,做汇报,做总结. 如果国际会议,研讨会,或者在外企,国外工作,英文的presentation就更加必不可少.英语的提升需要大家从 ...

  3. VS2012与VS2015同时安装用VS2012创建MFC程序时弹出编译错误”fatal error C1083: 无法打开包括文件:“mprapidef.h”: No such file or directory”的解决办法

    在WIndows 7操作系统上同时安装VS2012与VS2015并用VS2012创建MFC程序时弹出编译错误”fatal error C1083: 无法打开包括文件:“mprapidef.h”: No ...

  4. Python中获取异常（try Exception）信息

    异常信息的获取对于程序的调试非常重要,可以有助于快速定位有错误程序语句的位置. 这里获取异常(Exception)信息采用try...except...程序结构.如下所示: try: ... exce ...

  5. C语言函数指针 和 OC-Block

    C语言函数指针 和 OC-Block 一. C语言函数指针 关于函数指针的知识详细可参考:http://www.cnblogs.com/mjios/archive/2013/03/19/2967037 ...

  6. ORA-28002 密码过期解决方案

    ORA-28002 密码过期解决方案 错误场景:当使用sqlplus进行登录时报错:ORA-28002 密码过期.错误原因:由于oracle 11g 在默认在default概要文件中设置了密码过期天数 ...

  7. 用 map 表达互斥逻辑

    在这个开发周期遇到这样一个需求: 管理员可以给子账号配置权限,有些权限存在互斥不可同时勾选,比如 审核员和代采.审核和采购员不可同时勾选 之前同事实现的方式如下: 这样每添加一个互斥关系就要遍历一次, ...

  8. Ansible常用功能

    Ansible 是近几年十分流行的DevOps工具架构什么的我就不在这里赘述了,网上一找一堆 这里写点我在ansible常用功能 1.命令串 #copy文件 #ansible host文件中的主机组 ...

  9. flAbsPath on /var/lib/dpkg/status failed 解决 Cydia 红字

    越狱之后抹掉所有数据,然后再使用 doubleH3lix 越狱成功后,打开 Cydia 会提示如下错误: flAbsPath on /var/lib/dpkg/status failed - real ...

  10. django 登录注册注销

    一.设计数据模型 1.数据库模型设计 作为一个用户登录和注册项目,需要保存的都是各种用户的相关信息.很显然,我们至少需要一张用户表User,在用户表里需要保存下面的信息: 用户名 密码 邮箱地址 性别 ...