Angular - - 脏值检查及其相关
今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容。
先以普通js来做一个简单的监控例子吧:
var div = ducoment.getElementById("myDiv");
div.addEventListener("click",function(e){
console.log(e);
})
在这里,我们给一个div绑定了个点击事件,并且给这个绑定事件一个回调函数。这里我们就是给了这个div一个监听,当监听到有点击事件发生在此div上,则执行该回调函数。
Angular的$watch也是这样的效果。拿ngModel为例:
in html: <input
ng-model="value" />
in controller.js: $scope.value =
"Hello World";
我们只要改变input里的值,在controller里对应的$scope.value也会随之发生相同的变化。这里就是给$watch列表添加了一个监控函数,从而做到这个效果的。
$watch列表就是给所有绑定到同一$scope对象的UI元素添加一个监控函数到$watch列表里。
$watch列表会触发$digest循环,并且在$digest循环中通过“脏值检查”机制进行解析。
好了,本篇的正主来了~ 脏值检查~
什么是脏值检查?简单来说,就是Angular检查模型的值是否发生了变化,而程序还没对该变化进行同步的机制。Angular将会通过脏值检查遍历整
个$watch列表,只要当中的某个值发生了变化,应用就会退回到$digest循环中,直到检测到这个值不再发生任何变化,然后再启用新值并且继续遍
历$watch列表。整个$watch列表循环后,且其中值都不再变化了,那么整个应用程序的model也就趋于稳定了,这时候才在View渲染该有的数
据。
这里有个报错需要注意,也是挺多人会遇到且提出的问题,到底是什么错误呢,发上来秀秀,想必大家不会陌生~
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
$digest循环运行10次,Angular就会抛出这个异常,同事停止$digest循环。而10这个次数可以在config里面注入$rootScopeProvider服务并且配置:
$rootScopeProvider.digestTtl(15);
这时候,错误就变成了:
Error: [$rootScope:infdig] 15 $digest() iterations reached. Aborting!
哈哈,小伙伴们肯定会说:你个小贱人,不就是换个数值重新报错么.... 好吧,那么你上去看看本兽说的出现这个错误的原因,不就可以根据问题来解决了么 -。-
上面那个服务是用于配置当值不稳定的时候,$digest循环几次自动跳出循环的,部分场景可能会用得到。
关于$watch函数以及相关的使用,可以移步本兽的另一篇关于他的文章,url请狂戳这里:see $watch
$digest循环是脏值检查机制的主体。那么$digest怎么玩呢?
自动进入$digest我们已经知道了,比如$scope的$watch列表中值发生变化,则触发$digest循环。
那么手动召唤我们伟大的$digest循环呢?
当我们集齐一只$apply,就可以召唤$digest了,哇咔咔...
$apply()函数在框架外部让表达式在Angular上下文内部执行。好吧,这个确实听起来比较绕...
下面来一段$apply的使用代码吧:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<my-dir count="ctrl.count"></my-dir>{{ctrl.count}}
</div>

(function(){
angular.module('Demo', [])
.directive("myDir",myDir)
.controller('testCtrl',testCtrl);
function myDir(){
return{
restrict:'AECM',
template:'<input type="button" value="click me" />',
scope:{count:"="},
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.count++;
scope.$apply();
});
}
}
};
function testCtrl() {
var vm = this;
vm.count = 0;
}
}());

顺便也扯下,该在啥时使用$apply
Angular提供的可用于视图中任意指令都可调用$apply(),比如:ng-click,ng-change等等。
还有一些Angular内置的服务会调用$digest()。比如:$http服务(在XHR请求完成并触发更新返回的promise只会调用$apply())。
在我们使用第三方框架或者调用$timeout()时,或在自己写的指令当中使用。比如:jQuery(Angular不建议在controller内操
作DOM,DOM操作应该在Directive中使用,所以jQuery代码也请写在指令里吧),上面的代码(也是在指令中使用)。
此处说明,不建议在controller中使用$apply()。
好了,就写这么多吧,文笔不怎么好,水平也不怎么高,凑合着记录记录吧,哈哈
Angular - - 脏值检查及其相关的更多相关文章
- AngularJs 脏值检查及其相关
今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容. 先以普通js来做一个简单的监控例子吧: var div = ducoment.getElementById("my ...
- Angular DirtyChecking(脏值检查) $watch, $apply, $digest
Dirty Checking (脏值检查) Digest cycle and $scope Digest cycle and $scope First and foremost, AngularJS ...
- AngularJS进阶(十六)脏值检查
脏值检查 注:请点击此处进行充电! 需求 在项目开发过程中,需要对药店信息进行更改.如下图所示.现在的需求是:当药店信息没有发生变化时,点击"更新信息"按钮,提示"药店信 ...
- Angular1.x DirtyChecking(脏值检查) $watch, $apply, $digest
Dirty Checking (脏值检查) Digest cycle and $scope Digest cycle and $scope First and foremost, AngularJS ...
- Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
- angular 2 - 006 change detection 脏治检查 - DC
ANGULAR CHANGE DETECTION EXPLAINED 引发脏治检查有三种方式: Events - click, submit, - XHR - Fetching data from a ...
- Angularjs 脏值检测
文章转自:http://www.ituring.com.cn/article/39865 构建自己的AngularJS,第一部分:Scope和Digest 原文链接:http://teropa.inf ...
- 迈向angularjs2系列(4):脏值检测机制
目录 一: 概念简介 脏值检测,简单的说就是在MVC的构架中,视图会通过模型的change事件来更新自己. 脏值检测的核心代码是观察者模式的实现,其机制会执行digest循环,在特定UI组件的上下文执 ...
- ionic3 双向数据绑定失效 脏值检测失效
最近在使用ionic3过程中,使用了eval()方法进行字符串拼接成一个function使用 在eval()方法中,只能使用局部变量,全局变量无法使用,ionic3的this在eval中失效(unde ...
随机推荐
- DDMS工具使用(转)
DDMS工具使用 一.查看进程的堆栈使用情况1.选中你要查看的进程:2.点击“ Update Heap”按钮开启该进程的该项功能,如果单独打开ddms工具,按钮名为“Show heap updat ...
- ajax编程**
ajax 编程 *step1获得 XmlHttpRequest 对象.该对象由浏览器提供,但是该类型并没有标准化.ie 和其它浏览器不同,其它浏览器都支持该类型,而 ie 不支持. function ...
- Asp.Net MVC以 JSON传值扩展方法
Asp.Net在客户端和服务器端,以JSON形式相互传值,可写扩展方法,用到的类型如下: DataContractJsonSerializer类: 该类在System.Runtime.Serializ ...
- 深入理解viewport(转)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
- 在Ubuntu 14.04 64bit上安装StarUML 2.5版本
1,在“http://staruml.io/”下载: 2,sudo dpkg -i StarUML-v2.5.0-64-bit.deb安装. 3,注册 .在help中输入.name:maxiongyi ...
- Trim(',')的作用去除最有一个','
public bool XMLDataImport() { List<string> sqllist = new List<string>(); ...
- Lua学习系列(五)
calling C functions from Lua 5.2 这篇文章也不错: http://blog.csdn.net/x356982611/article/details/26688287 h ...
- 控制流之break
break语句是用来 终止 循环语句的,即哪怕循环条件没有称为False或序列还没有被完全递归,也停止执行循环语句.一个重要的注释是,如果你从for或while循环中 终止 ,任何对应的循环else块 ...
- 神经网络 Neuroph - Java Neural Network Platform Neuroph
http://neuroph.sourceforge.net/image_recognition.html https://github.com/neuroph/neuroph
- checkbox选择多数据传入后台时,怎样解析数据
<input type="checkbox" name="test" value="值1" />显示的内容<input t ...