深入理解$watch ，$apply 和 $digest --- 理解数据绑定过程——续
Angular什么时候不会自动为我们$apply呢？
这是Angular新手共同的痛处。为什么我的jQuery不会更新我绑定的东西呢？因为jQuery没有调用$apply，事件没有进入angular context，$digest循环永远没有执行。
我们来看一个有趣的例子：
假设我们有下面这个directive和controller
app.js
app.directive('clickable', function() {
return {
restrict: "E",
scope: {
foo: '=',
bar: '='
},
template: '<ul style="<li>{{foo}}</li><li>{{bar}}</li></ul>',
link: function(scope, element, attrs) {
element.bind('click', function() {
scope.foo++;
scope.bar++;
});
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.foo = 0;
$scope.bar = 0;
});它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。
那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会
真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：
element.bind('click', function() {
scope.foo++;
scope.bar++;
scope.$apply();
});$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。
有用啦！但是有一种更好的使用$apply的方法：
element.bind('click', function() {
scope.$apply(function() {
scope.foo++;
scope.bar++;
});
})因此，如果你想使用一个jQuery插件，并且要执行$digest循环来更新你的DOM的话，要确保你调用了$apply。
使用$watch来监视你自己的东西
你已经知道了我们设置的任何绑定都有一个它自己的$watch，当需要时更新DOM，但是我们如果要自定义自己的watches呢？简单
app.js
app.controller('MainCtrl', function($scope) {
$scope.name = "Angular";
$scope.updated = 0;
$scope.$watch('name', function(newValue, oldValue) {
if (newValue === oldValue) { return; } // AKA first run
$scope.updated++;
});
});index.html
<body ng-controller="MainCtrl">
<input ng-model="name" />
Name updated: {{updated}} times.
</body>watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。通常你不需要略过第一次执行，但在这个例子里面你是需要的。
总结
好吧，我希望你们已经学会了在Angular中数据绑定是如何工作的。我猜想你的第一印象是dirty-checking很慢，好吧，其实是不对的。它像闪电般快。但是，是的，如果你在一个模版里有2000-3000个watch，它会开始变慢。但是我觉得如果你达到这个数量级，就可以找个用户体验专家咨询一下了！
深入理解$watch ，$apply 和 $digest --- 理解数据绑定过程——续的更多相关文章
- 理解$watch ，$apply 和 $digest --- 理解数据绑定过程
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...
- 深入理解angularjs $watch ，$apply 和 $digest --- 理解数据绑定过程
转自:http://www.angularjs.cn/A0a6 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-ch ...
- [转]理解$watch ，$apply 和 $digest --- 理解数据绑定过程
原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...
- 理解Angular中的$apply()以及$digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- 深入理解Angular中的$Apply()以及$Digest()
$apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...
- (网页)理解Angular中的$apply()以及$digest()
转自CSDN: 工作有问题上CSDN上转转. $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$ ...
- (转) 理解Angular中的$apply()以及$digest()
原文地址:http://blog.csdn.net/dm_vincent/article/details/38705099 $apply()和$digest()在AngularJS中是两个核心概念,但 ...
- 通俗理解angularjs中的$apply，$digest，$watch
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- call,apply,bind的理解
2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...
随机推荐
- Java 问卷调查
对于我的未来,我打算现在学校好好学习专业知识,打下牢固的知识基础,为以后在工作岗位上能够顺利完成任务而努力. 在我看来,学习是一个接触并了解新事物的过程,掌握和应用这些新知识就是学习的目的.然而我们学 ...
- 20145331魏澍琛《网络对抗》Exp2 后门原理与实践
20145331魏澍琛<网络对抗>Exp2 后门原理与实践 基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 上网时候弹出一个广告说你中奖了,或者你可以贷款10万元之类 ...
- 如何解析读取excel数据
简介 前段时间完成了一个输出excel的任务,感觉挺开心的,用的就是Apache POI的jar包,Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Mic ...
- JAVA I/O（六）多路复用IO
在前边介绍Socket和ServerSocket连接交互的过程中,读写都是阻塞的.套接字写数据时,数据先写入操作系统的缓存中,形成TCP或UDP的负载,作为套接字传输到目标端,当缓存大小不足时,线程会 ...
- 在函数后面加上const
1.现象 在c++类中,有些成员函数在声明时,后面加了const,如 2.作用 ①.提高程序可读性,可以一眼看出此函数不能修改类成员变量: ②.提高程序可靠性,此函数试图修改成员变量时,编译器会通不过
- 文件IO和标准IO的区别【转】
一.先来了解下什么是文件I/O和标准I/O: 文件I/O:文件I/O称之为不带缓存的IO(unbuffered I/O).不带缓存指的是每个read,write都调用内核中的一个系统调用.也就是一般所 ...
- ACM-ICPC 2018 沈阳赛区网络预赛 Made In Heaven（K短路）题解
思路:K短路裸题 代码: #include<queue> #include<cstring> #include<set> #include<map> # ...
- 【eclipse】删除工作空间
- Jmeter工具做性能测试 常见的错误汇总
在Win机器上用Jmeter做性能测试,汇总下我自身遇到的错误和解决方案 java.net.BindException: Address already in use: JVM_Bind 原因分析:压 ...
- 【转】VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别
☞ 本文主要介绍软件『VMware Workstation(虚拟机)』的相关内容:VMware网络连接模式—桥接.NAT以及仅主机模式的详细介绍和区别. 其下列版本/分支可以参考本文: 全部版本/分支 ...