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 --- 理解数据绑定过程——续的更多相关文章

  1. 理解$watch ，$apply 和 $digest --- 理解数据绑定过程

    原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...

  2. 深入理解angularjs $watch ，$apply 和 $digest --- 理解数据绑定过程

    转自:http://www.angularjs.cn/A0a6 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-ch ...

  3. [转]理解$watch ，$apply 和 $digest --- 理解数据绑定过程

    原文地址:http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 注 这篇博文主要是写给新手的,是给那些刚刚开始 ...

  4. 理解Angular中的$apply()以及$digest()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  5. 深入理解Angular中的$Apply()以及$Digest()

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的 ...

  6. (网页)理解Angular中的$apply()以及$digest()

    转自CSDN: 工作有问题上CSDN上转转. $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$ ...

  7. (转) 理解Angular中的$apply()以及$digest()

    原文地址:http://blog.csdn.net/dm_vincent/article/details/38705099 $apply()和$digest()在AngularJS中是两个核心概念,但 ...

  8. 通俗理解angularjs中的$apply，$digest，$watch

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  9. call,apply,bind的理解

    2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...

随机推荐

  1. djando 项目用django自己服务器在局域网中被访问设置

    这是一个相当操蛋的东西,害老子搞了那么久,其实嘞,也用不着那么恨,都是自己做的孽!! -----------------人工分割线----------------------------------- ...

  2. 20165211 预备作业3 Linux安装与学习

    20165211 预备作业3 Linux安装与学习 1. Linux安装 涉及软件:VirtualBox,Ubuntu 参考教程:基于VirtualBox安装Ubuntu图文教程 安装过程的问题 在安 ...

  3. 《Python程序设计（第3版）》[美] 约翰·策勒（John Zelle） 第 3 章 答案

    判断对错 1．由计算机存储和操作的信息称为数据.2．由于浮点数是非常准确的,所以通常应该使用它们,而不是int.3．像加法和减法这样的操作在mAth库中定义.4．n 项的可能排列的数目等于 n!.5． ...

  4. Python3基础 random 配合while输出10个随机整数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. poj 2481 Cows（树状数组）题解

    Description Farmer John's cows have discovered that the clover growing along the ridge of the hill ( ...

  6. 51Nod 1344 走格子（贪心

    1344 走格子   有编号1-n的n个格子,机器人从1号格子顺序向后走,一直走到n号格子,并需要从n号格子走出去.机器人有一个初始能量,每个格子对应一个整数A[i],表示这个格子的能量值.如果A[i ...

  7. org.apache.axis2.AxisFault: unknown

    遇到这个异常懵逼了很长时间才解决,axis2框架个人感觉进行接口相互调用还是比较麻烦的, 调了很长时间,我由a项目调用b项目的接口时,一直报这个错,在网上找了很长时间,也没找到 解决的办法,自己慢慢的 ...

  8. ZOJ 3329 One Person Game （经典概率dp+有环方程求解）

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3329 题意:现在有三个骰子,分别有k1,k2和k3面,面上的点就是1~ki ...

  9. 通过设置代理，解决服务器禁止抓取，报“java.io.IOException: Server returned HTTP response code: 403 for URL”错误的方法

    java.io.IOException: Server returned HTTP response code: 403 for URL: http:// 这个是什么异常呢? 当你使用java程序检索 ...

  10. Jmeter工具做性能测试 常见的错误汇总

    在Win机器上用Jmeter做性能测试,汇总下我自身遇到的错误和解决方案 java.net.BindException: Address already in use: JVM_Bind 原因分析:压 ...