• 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的更多相关文章

  1. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  2. angular1的复选框指令--checklistModel

    这个指令可以改变一组checkbox的model格式,提交的时候格式为[x,y,z,...] //复选框指令 .directive('checklistModel', ['$parse', '$com ...

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

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

  4. angular之$watch() $watchGroup()和$watchCollection()

    $watch $watch主要是用来监听一个对象,在对象发生变化时触发某个事件. 用法: $scope.$watch(watchFn,watchAction, deepWatch) 接下来讲一下这几个 ...

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

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

  6. angular源码分析:$compile服务——指令的编写

    这一期中,我不会分析源码,只是翻译一下"https://docs.angularjs.org/api/ng/service/$compile",当然不是逐字逐句翻译,讲解指令应该如 ...

  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. [Cake] 0.C# Make自动化构建-简介

    0.Cake是什么? Cake是C# Make的缩写,是一个基于C# DSL的自动化构建系统.它可以用来编译代码,复制文件以及文件夹,运行单元测试,压缩文件以及构建Nuget包等等. 熟悉大名鼎鼎的M ...

  2. jenkins 设置自动发送邮件

      1.测试邮件发送 进入jenkins系统管理-->系统设置做如下配置   1.设置系统管理员邮件地址,这是一个全局变量,意味着所有的jenkins执行的任务,最后都会通过这个邮件地址发送邮件 ...

  3. 使用fontawesome图标

     我每次找图标时都是在阿里的开源图标库中找的,但是使用起来不是很方便.而我发现了fontawesome之后,觉得实在不错,所以分享给大家.  这是一些参考的文档. fontawesome下载与使用介绍 ...

  4. java内存模型1

    并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来交换信息.在命令式编程中,线程之间的通信 ...

  5. j2ee分布式架构 dubbo + springmvc + mybatis + ehcache + redis 分布式架构

    介绍 <modules>        <!-- jeesz 工具jar -->        <module>jeesz-utils</module> ...

  6. MyBatis源码解读(4)——SqlSession(上)

    在上一篇博客中提到MyBatis是如何实现代理类MapperProxy,并抛出了一个问题--是怎么执行一个具体的sql语句的,在文末中提到了MapperMethod的execute采用命令模式来判断是 ...

  7. 【收藏】15个常用的javaScript正则表达式

    1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...

  8. 200 OK (from cache)原因

    Meta标签中的http-equiv用来标记不可缓存或过期时间,但效果一般.而且代理缓存基本不访问HTML文档内容,所以尽量少用meta标签控制缓存. Pragma: no-cache Forces ...

  9. (转ORCLE导入导出命令)

    oracle数据库导入导出命令! Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份.   大多情况都可以用Oracle数据导入导出 ...

  10. /proc/kcore失效,调试其文件系统相关模块,使重新正常工作

    为分析内核,在有限的机器上用虚拟机装了CentOS.6.9.i386.minimal,重新编译了3.19.8内核并克隆.当使用/proc/kcore进行内核动态映像调试时,发现与kgdb远程调试端读到 ...