首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Angular中的$watch、$watchGroup、$watchCollection

Posted in Javascript onJune 25, 2017

•  1，原型：$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}；

•  2，参数：watchExp(必须)：{(function()|string)}，可以字符串表达式，也可以带当前scope为参数的函数

•

- `string`: Evaluated as {@link guide/expression expression}

•

- `function(scope)`: called with current `scope` as a parameter.

• 3，参数：listener(必须):function(newVal, oldVal, scope),观察的表达式变化的时候调用的函数。

• 4，参数：objectEquality(非必须):是否监视个对象,默认为false

• 5，$scope.$digest().会执行所有的同$scope下的$watch。

•

但会出错$apply already in progress,换了$rootScope也一样。

•

原因-参考大牛博客：http://blog.csdn.net/aitangyong/article/details/48972643

•

$digest、$apply、$$phase这些属性或者方法其实都是$scope中的私有的，最好不要使用。

• 6，$watch一个对象。

•

如果要监视对象的变化(地址改变)，$watch对象名，第三个参数默认；

•

如果监测对象中某一属性，可以写user.name的形式，第三个参数默认；

•

如果监测对象中全部属性，$watch对象名，第三个参数true；

• 7，$watchGroup，第一个参数是一个表达式的数组或者返回表达式的数组的函数。

• 8，$watchCollection；

•

js中数组也是对象，但按照$watch一个对象的方式，只有数组引用变了才能监听变化，增加删除$watch监听不到，所以就有了$watchCollection。

•

function(obj, listener)：第一个参数必须对象或者返回对象的函数。

•9，注销$watch

•

       $watch函数返回一个注销监听的函数，太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

一、使用方法

html

<div ng-controller="ctrl">
    <h2>$watch</h2>
    <div>
      <input type="text" ng-model="value1"/>
    </div>
    <div ng-bind="w1"></div>
    <h2>$watchGroup</h2>
    <div>
      <input type="text" ng-model="value2"/>
      <input type="text" ng-model="value3"/>
    </div>
    <div ng-bind="w2"></div>
    <h2>$watchCollection</h2>
    <ul>
      <li ng-repeat="v in arr" ng-bind="v"></li>
    </ul>
    <div ng-bind="w3"></div>
  </div>

js

angular.module('nickApp', [])
        .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);
        }])

二、小案例

html

<h2>小案例</h2>
  <ul>
    <li ng-repeat="item in items.goodsArr">
      <p ng-bind="item.goods"></p>
      <p>
        <span>单价：</span>
        <span ng-bind="item.price"></span>
      </p>
      <div>
        <input type="number" ng-model="item.num">
        <span>个</span>
      </div>
    </li>
  </ul>
  <div>
    <span>总计：</span>
    <span ng-bind="items.sum"></span>
    <span>元</span>
  </div>

js          

//     小案例
        .factory('watchService', [function () {
          var items = {
            goodsArr: [{
              goods: 'goods1',
              price: 10,
              num: ''
            }, {
              goods: 'goods2',
              price: 20,
              num: ''
            }],
            sum: 0
          };
          return {
            getItemsSave: function () {
              return items;
            }
          };
        }])
        .controller('bodyCtl', ['$scope', 'watchService', function ($scope, watchService) {
          $scope.items = watchService.getItemsSave();
//          这里要监听数量变化计算综合
          //一 只监听所有num变化计算总额
          var watchArr = [];
          $scope.items.goodsArr.forEach(function (v, i) {
            watchArr.push("items.goodsArr[" + i + "]['num']");
          });
          $scope.$watchGroup(watchArr, function (newVal, oldVal) { //注意：newVal与oldVal都返回的是一个数组
            $scope.items.sum = 0;
            $scope.items.goodsArr.forEach(function (v, i) {
              $scope.items.sum += v.price * (v.num > 0 ? v.num : 0);
            });
          });
/*
          //二 这样写则监听items.goodsArr所有成员
          $scope.$watch('items.goodsArr', function () {
            $scope.items.sum = 0;
            $scope.items.goodsArr.forEach(function (v, i) {
              $scope.items.sum += v.price * (v.num > 0 ? v.num : 0);
            });
          }, true);*/
        }])

全部代码

<!DOCTYPE html>
<html ng-app="nickApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>angular之$watch、$watchGroup、$watchCollection</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script>
    /*
     * 1，原型：$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}；
     * 2，参数：watchExp(必须)：{(function()|string)}，可以字符串表达式，也可以带当前scope为参数的函数
     *    - `string`: Evaluated as {@link guide/expression expression}
     *    - `function(scope)`: called with current `scope` as a parameter.
     * 3，参数：listener(必须):function(newVal, oldVal, scope),观察的表达式变化的时候调用的函数。
     * 4，参数：objectEquality(非必须):是否监视个对象,默认为false
     * 5，$scope.$digest().会执行所有的同$scope下的$watch。
     *  但会出错$apply already in progress,换了$rootScope也一样。
     *  原因-参考大牛博客：http://blog.csdn.net/aitangyong/article/details/48972643
     *  $digest、$apply、$$phase这些属性或者方法其实都是$scope中的私有的，最好不要使用。
     * 6，$watch一个对象。
     *  如果要监视对象的变化(地址改变)，$watch对象名，第三个参数默认；
     *  如果监测对象中某一属性，可以写user.name的形式，第三个参数默认；
     *  如果监测对象中全部属性，$watch对象名，第三个参数true；
     * 7，$watchGroup，第一个参数是一个表达式的数组或者返回表达式的数组的函数。
     * 8，$watchCollection；
     *   js中数组也是对象，但按照$watch一个对象的方式，只有数组引用变了才能监听变化，增加删除$watch监听不到，所以就有了$watchCollection。
     *   function(obj, listener)：第一个参数必须对象或者返回对象的函数。
     */
    angular.module('nickApp', [])
        .controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
          // $watch
          var watcher = $scope.$watch("value1", function (newVal, oldVal) {
            $scope.w1 = "$watch--" + "new:" + newVal + ";" + "old:" + oldVal;
            /*
             *注销$watch
             *太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。
             *$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：
             */
            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);
        }])
        //     小案例
        .factory('watchService', [function () {
          var items = {
            goodsArr: [{
              goods: 'goods1',
              price: 10,
              num: ''
            }, {
              goods: 'goods2',
              price: 20,
              num: ''
            }],
            sum: 0
          };
          return {
            getItemsSave: function () {
              return items;
            }
          };
        }])
        .controller('bodyCtl', ['$scope', 'watchService', function ($scope, watchService) {
          $scope.items = watchService.getItemsSave();
//          这里要监听数量变化计算综合
          //一 只监听所有num变化计算总额
          var watchArr = [];
          $scope.items.goodsArr.forEach(function (v, i) {
            watchArr.push("items.goodsArr[" + i + "]['num']");
          });
          $scope.$watchGroup(watchArr, function (newVal, oldVal) { //注意：newVal与oldVal都返回的是一个数组
            $scope.items.sum = 0;
            $scope.items.goodsArr.forEach(function (v, i) {
              $scope.items.sum += v.price * (v.num > 0 ? v.num : 0);
            });
          });
/*
          //二 这样写则监听items.goodsArr所有成员
          $scope.$watch('items.goodsArr', function () {
            $scope.items.sum = 0;
            $scope.items.goodsArr.forEach(function (v, i) {
              $scope.items.sum += v.price * (v.num > 0 ? v.num : 0);
            });
          }, true);*/
        }])
  </script>
</head>
<body ng-controller="bodyCtl">
<div ng-view>
  <div ng-controller="ctrl">
    <h2>$watch</h2>
    <div>
      <input type="text" ng-model="value1"/>
    </div>
    <div ng-bind="w1"></div>
    <h2>$watchGroup</h2>
    <div>
      <input type="text" ng-model="value2"/>
      <input type="text" ng-model="value3"/>
    </div>
    <div ng-bind="w2"></div>
    <h2>$watchCollection</h2>
    <ul>
      <li ng-repeat="v in arr" ng-bind="v"></li>
    </ul>
    <div ng-bind="w3"></div>
  </div>
  <h2>小案例</h2>
  <ul>
    <li ng-repeat="item in items.goodsArr">
      <p ng-bind="item.goods"></p>
      <p>
        <span>单价：</span>
        <span ng-bind="item.price"></span>
      </p>
      <div>
        <input type="number" ng-model="item.num">
        <span>个</span>
      </div>
    </li>
  </ul>
  <div>
    <span>总计：</span>
    <span ng-bind="items.sum"></span>
    <span>元</span>
  </div>
</div>
</body>
</html>

以上所述是小编给大家介绍的Angular中的$watch、$watchGroup、$watchCollection，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Angular中的$watch、$watchGroup、$watchCollection

- Author -

webNick

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
对象的类型：本地对象(1)
Dec 29 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
JS严格模式知识点总结
Feb 27 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 #Javascript
Angular2.js实现表单验证详解
Jun 23 #Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
Angular2 组件通信的实例代码
Jun 23 #Javascript
js实现文字列表无缝滚动效果
Jun 23 #Javascript
pdfkit(1) matplotlib(7) vue-esign(1) 微信小程序(9) ipyvizzu(1) 条形图(1) 蒙特卡罗(1) Pillow(2) 可视化动图(1) bufio(1)
You might like
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
浅析is_writable的php实现
2013/06/18 PHP
Web程序工作原理详解
2014/12/25 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
PyCharm安装PyQt5及其工具（Qt Designer、PyUIC、PyRcc）的步骤详解
2020/11/02 Python
Too Faced官网：美国知名彩妆品牌
2017/03/07 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2014年市场部工作总结
2014/11/25 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题