angularJS $watch $digest $apply
一 简介
AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化，那么这个变化也会自动地反馈到scope的数据上，也即意味着scope模型会自动地更新。类似地，当scope模型发生变化时，view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢？当你写下表达式如{{ aModel }}时，AngularJS在幕后会为你在scope模型上设置一个watcher，它用来在数据发生变化的时候更新view。
二 $watch
1.什么是$watch
$scope对象上的$watch方法会给Angular事件循环内的每个$digest调用装配一个脏值检查，如果在表达式上检测到变化，Angular总是会返回$digest循环。
也就是说，$watch代表的就是对数据源的监听，当数据源发生变化，就会触发第二个参数的回调函数。
2.使用
$watch函数本身接受两个必要参数和一个可选的参数：
$scope.$watch(‘aModel’, function(newValue, oldValue) {
//update the DOM with newValue
},true);
第一个参数:可以是一个作用域对象的属性，或者是一个函数，在$digest循环中的每个$digest调用都会涉及到它。如果是一个字符串，Angular会在$scope上下文中对它求值。
第二个参数：作为回调的监听器函数，它智慧在第一个参数的当前值与先前值不相等时调用。
第三个参数：true/false，默认为false，主要用于第一个参数为引用型的情况下。
3.举例：
<body>
<input ng-model=‘name‘ type=‘text‘/>
<div>change count: {{count}}</div>
<script>
angular.module(‘myApp‘,[])
.run([‘$rootScope‘,function($rootScope){
$rootScope.count = 0;
$rootScope.name = ‘hcc‘;
$rootScope.$watch(‘name‘,function(){
$rootScope.count++;
})
}]);
</script>
</body>
用$watch来对$rootScope中的name进行监视，并在它发生变化的时候将$rootScope中的count属性增加1。因此，每当我们对name进行一次修改时，下面显示的count数字就会增加1。
然而，我们在实际运用中常常不只是对一个原始类型的属性进行监视，还可能对集合进行监视。对于原始类型，如果我们使用了一个赋值操作，则这个原始类型变量会“真正的”被进行一次复制，然而对于引用类型，在进行赋值时，仅仅是将赋值的变量指向了这个引用类型。因此如果要对一个引用类型，尤其是在实际运用中常见的对象数组进行监视时，情况就不一样了。
<body>
<div hg-repeat=‘item in items‘>
<input ng-model=‘item.a‘/><span>{{item.a}}</span>
</div>
<div>change count: {{count}}</div>
<script>
angular.module(‘myApp‘,[])
.run([‘$rootScope‘,function($rootScope){
$rootScope.count = 0;
$rootScope.items = [
{ "a": 1 },
{ "a": 2 },
{ "a": 3 },
{ "a": 4 }
]
$rootScope.$watch(‘items‘,function(){
$rootScope.count++;
},true)
}]);
</script>
</body>
在angular 1.1.4版本之后，添加了一个$watchCollection()方法来针对数组（也就是集合）进行监视，它的性能介于全等监视和引用监视二者之间，即它并不会对数组中每一项的属性进行监视，但是可以对数组的项目的增减做出反应。
在这里只需将$rootScope.$watch改成$rootScope.$watchCollection即可：
$rootScope.$watchCollection(‘items‘,function() {
$rootScope.count++;
})
对集合的操作，推荐使用这种方式。
三 $digest和$apply
1.在调用了$scope.$digest()后，$digest循环就开始了。假设你在一个ng-click指令对应的handler函数中更改了scope中的一条数据，此时AngularJS会自动地通过调用$digest()来触发一轮$digest循环。当$digest循环开始后，它会触发每个watcher。这些watchers会检查scope中的当前model值是否和上一次计算得到的model值不同。如果不同，那么对应的回调函数会被执行。调用该函数的结果，就是view中的表达式内容会被更新。
AngularJS并不直接调用$digest()，而是调用$scope.$apply()，后者会调用$rootScope.$digest()。因此，一轮$digest循环在$rootScope开始，随后会访问到所有的children scope中的watchers。
正常情况下，在angular上下文中，修改数据源就会自动触发。$apply只是把$digest做了一次封装，来提供手动触发，那么为什么需要手动触发呢。因为如果是不在angular上下文的情况下，如浏览器DOM事件，setTimeout执行，这种情况下，angular无法获取到事件，所以，通过apply来手动触发一下，在apply的参数中去修改数据源。
2.举例：
<body ng-app=“myApp”>
<div ng-controller=“MessageController”>
Delayed Message: {{message}}
</div>
</body>
angular.module(‘myApp’,[]).controller(‘MessageController’, function($scope) {
$scope.getMessage = function() {
setTimeout(function() {
$scope.message = ‘Fetched after 3 seconds';
console.log(‘message:’+$scope.message);
}, 2000);
}
$scope.getMessage();
});
通过运行这个例子，你会看到过了两秒钟之后，控制台确实会显示出已经更新的model，然而，view并没有更新。原因也许你已经知道了，就是我们忘了调用$apply()方法。因此，我们需要修改getMessage()。
angular.module(‘myApp’,[]).controller(‘MessageController’, function($scope) {
$scope.getMessage = function() {
setTimeout(function() {
$scope.$apply(function() {
//wrapped this within $apply
$scope.message = ‘Fetched after 3 seconds';
console.log(‘message:’ + $scope.message);
});
}, 2000);
}
$scope.getMessage();
});
angularJS $watch $digest $apply的更多相关文章
- 理解Angular中的$apply()以及$digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 深入理解Angular中的$Apply()以及$Digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- angularJS中的$apply(),$digest(),$watch()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- $watch How the $apply Runs a $digest
作者:junyuecao | 发表于 8-8 13:39 | 最后更新时间:8-9 02:34 原文地址:http://angular-tips.com/blog/2013/08/watch-how- ...
- $apply() $digest()
理解Angular中的$apply()以及$digest() <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- angularjs现学现记之—$apply()和$digest()
angularjs的双向数据绑定是个重要的特性,它让我们的代码简洁了许多,然而它又是如何知道数据发生了变化并改变页面的呢.最近看了一篇介绍觉得十分有用 首先,在angularjs中是有$watch事件 ...
- Angular DirtyChecking(脏值检查) $watch, $apply, $digest
Dirty Checking (脏值检查) Digest cycle and $scope Digest cycle and $scope First and foremost, AngularJS ...
- --@angularjs--理解Angular中的$apply()以及$digest()
$apply() 和 $digest() 在 AngularJS 中是两个核心概念,但是有时候它们又让人困惑.而为了了解 AngularJS 的工作方式,首先需要了解 $apply() 和 $dige ...
- (网页)理解Angular中的$apply()以及$digest()
转自CSDN: 工作有问题上CSDN上转转. $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$ ...
- Angular1.x DirtyChecking(脏值检查) $watch, $apply, $digest
Dirty Checking (脏值检查) Digest cycle and $scope Digest cycle and $scope First and foremost, AngularJS ...
随机推荐
- iOS7初体验(2)——单元测试
在Xcode 4.6及以前的版本,一直觉得单元测试这部分功能做得很鸡肋,用起来感觉很别扭.这一次Xcode 5.0默认就引入了单元测试,赶快来看看看相比以前的版本有什么提升吧!~_~ 1. 首 ...
- OC - 31.通过封装的自定义布局快速实现商品展示
概述 实现效果 设计思路 采用MVC架构,即模型—视图-控制器架构 使用MJExtension框架实现字典转模型 使用MJRefresh框架实现上拉和下拉刷新 上拉刷新,加载新的数据 下拉刷新,加载更 ...
- 十三、C# 事件
1.多播委托 2.事件 3.自定义事件 在上一章中,所有委托都只支持单一回调. 然而,一个委托变量可以引用一系列委托,在这一系列委托中,每个委托都顺序指向一个后续的委托, 从而形成了一个委托链,或 ...
- [LeetCode OJ] Distinct Subsequences
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- 利用set实现去重
最近读了一些有关于ES6的文章,觉得真是一个超级大的进步,就是不知道兼容性怎么样,鉴于我还在初学,先写个小例子练手,顺便时刻提醒自己要坚持学下去.未来的趋势肯定是替代es5没跑了. var arr=[ ...
- linux下搭建svn服务器
安装步骤如下: 1.yum install subversion 2.输入rpm -ql subversion查看安装位置,如下图: 我们知道svn在bin目录下生成了几个二进制文件. 输入 ...
- 解读为什么有符号的char可表示范围是-128~+127
问:为什么有符号的char可表示范围是-128~+127? 要明白这个问题,首先要明白一下几点: 对于char和int计算机中以补码形式存在. 严格来说计算机就是傻逼,它只知道某个位上是0还是1. 我 ...
- ArcGis Engine 读取自定义prj坐标系文件时，中文名称乱码
今天测试时发现使用ArcMap自定义一个坐标系,将坐标系名称设置为中文,基准面名称选择为自定义后,然后保存成prj文件. 在自己的程序中读取该prj文件后,发现ISpatialReference 对象 ...
- test about cnblog
there is nothing here. This is only a test about cnblog!
- [BZOJ 3791] 作业 【DP】
题目链接:BZOJ - 3791 题目分析 一个性质:将一个序列染色 k 次,每次染连续的一段,最多将序列染成 2k-1 段不同的颜色. 那么就可以 DP 了,f[i][j][0|1] 表示到第 i ...