深入理解$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是重新绑 ...
随机推荐
- C++面向对象高级开发课程（第三周）
一,类与类之间的关系:继承(Inheritance).复合(Composition).委托(Delegation). 二,复合:表示 is-a ,该设计思想可以参照C语言的 struct . 1. 例 ...
- windows 常用快捷键和dos命令
快捷键 win + R 打开dos命令行窗口 win + E 打开资源管理窗口 (计算机) shift + 鼠标右击 + select 在此处打开命令窗口 可在资源管理目录下打开dos命令 windo ...
- [noip模拟题]科技节 - 搜索 - 位运算优化
[问题描述] 一年一度的科技节即将到来.同学们报名各项活动的名单交到了方克顺校长那,结果校长一看皱了眉头:这帮学生热情竟然如此高涨,每个人都报那么多活动,还要不要认真学习了?!这样不行!……于是,校长 ...
- C++ shared_ptr的用法
一. http://www.cnblogs.com/welkinwalker/archive/2011/10/20/2218804.html 二.http://www.cnblogs.com/Tian ...
- C# 获取枚举的描述属性
在使用枚举类型时,我们需要取名称和值,甚至有时候还需要取枚举类型的描述.通过反射,我们能获取到枚举类型的描述属性. 首先我们需要给枚举类型添加描述属性(属性都没有是不可能取到的),[Descripti ...
- JavaScript:Array属性方法
,,,,]; console.dir(arr); var pro=Object.getPrototypeOf(arr); console.dir(pro); 来一个个的查看数组的属性,方法 1.Arr ...
- FJUT Home_W的gcd（乱搞）题解
题意: 给出一个序列a1,a2,a3,……an. HOME_W想在其中挖掘二元组,其中二元组的挖掘方法如下. 对于任意整数 l,r ,可得到一个二元组(l,gcd(al,al+1,……,ar)). H ...
- Java8新特性：Function接口和Lambda表达式参考
Lambda基本:https://blog.csdn.net/wargon/article/details/80656575 https://www.cnblogs.com/hyyq/p/742566 ...
- triggerHandler不执行事件默认值
<input type="text" /> $('input').triggerHandler('focus');
- springmvc基础知识及注解
SpringMVC 1.概念 Spring的MVC框架是一个基于DispatcherServlet的MVC框架,主要由DispatcherServlet.处理器映射.处理器.视图解析器.视图组成.每一 ...