什么时候手动调用$apply()方法？

如果AngularJS总是将我们的代码wrap到一个function中并传入$apply()，以此来开始一轮$digest循环，那么什么时候才需要我们手动地调用$apply()方法呢？实际上，AngularJS对此有着非常明确的要求，就是它只负责对发生于AngularJS上下文环境中的变更会做出自动地响应(即，在$apply()方法中发生的对于models的更改)。AngularJS的built-in指令就是这样做的，所以任何的model变更都会被反映到view中。但是，如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。这就像告诉AngularJS，你修改了一些models，希望AngularJS帮你触发watchers来做出正确的响应。

比如，如果你使用了JavaScript中的setTimeout()来更新一个scope model，那么AngularJS就没有办法知道你更改了什么。这种情况下，调用$apply()就是你的责任了，通过调用它来触发一轮$digest循环。类似地，如果你有一个指令用来设置一个DOM事件listener并且在该listener中修改了一些models，那么你也需要通过手动调用$apply()来确保变更会被正确的反映到view中。

让我们来看一个例子。加入你有一个页面，一旦该页面加载完毕了，你希望在两秒钟之后显示一条信息。你的实现可能是下面这个样子的：

HTML:

<body ng-app="myApp">

  <div ng-controller="MessageController">

    Delayed Message: {{message}}

  </div>

</body>

JavaScript:

/* What happens without an $apply() */

    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()，如下所示：

/* What happens with $apply */

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();

    });

如果你运行了上面的例子，你会看到view在两秒钟之后也会更新。唯一的变化是我们的代码现在被wrapped到了$scope.$apply()中，它会自动触发$rootScope.$digest()，从而让watchers被触发用以更新view。

Note:顺便提一下，你应该使用$timeout service来代替setTimeout()，因为前者会帮你调用$apply()，让你不需要手动地调用它。

而且，注意在以上的代码中你也可以在修改了model之后手动调用没有参数的$apply()，就像下面这样：

$scope.getMessage = function() {

  setTimeout(function() {

    $scope.message = ‘Fetched after two seconds‘;

    console.log(‘message:‘ + $scope.message);

    $scope.$apply(); //this triggers a $digest

  }, 2000);

};

以上的代码使用了$apply()的第二种形式，也就是没有参数的形式。需要记住的是你总是应该使用接受一个function作为参数的$apply()方法。这是因为当你传入一个function到$apply()中的时候，这个function会被包装到一个try…catch块中，所以一旦有异常发生，该异常会被$exceptionHandler service处理。

随机推荐

  1. Windows10 蓝屏 DRIVER_IRQL_NOT_LESS_OR_EQUAL (vfilter.sys)的可能解决方法

    早上我的笔记本从休眠中开机的时候突然出现了蓝屏,这个蓝屏在前几天出现过了.两次提示的终止代码都一样.我的笔记本型号是DELL XPS15 9560 我的笔记本配置: 类别 型号 内存 16GB DDR ...

  2. JQuery使用教程

    jQuery简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team jQuery是对原生JavaScript二次封装的工具函数集合 ...

  3. 2017 ACM/ICPC 新疆赛区 I 题 A Possible Tree 带权并查集

    传送门 题意:给定一棵带权树的形态, 但是并不知道每天条边的具体权重. 然后给m个信息, 信息格式为u v val, 表示在树上u 到 v 的路径上经过的边的权重的异或和为val, 问前面最多有多少个 ...

  4. Java中线程出现Exception in thread "Thread-0" java.lang.IllegalMonitorStateException异常 解决方法

    代码 package thread; public class TestChongNeng { public static void main(String[] args) { Thread t1 = ...

  5. BZOJ1407: [Noi2002]Savage exgcd

    Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数Ci, Pi, Li表示每个野人所住的初始洞穴编号,每年走过的洞穴 ...

  6. Java中++,--,前缀后缀表达值的不同,与^的值计算

    package 习题1; /** * ++ -- 与 ^ 的一些计算 * @author SeeClanUkyo * */ public class Test4 { public static voi ...

  7. ElasticSearch 5.4 安装

        1. 前期准备  环境准备 IP地址 操作系统 内存 192.168.1.10 centos 7 16 192.168.1.11 centos 7 16 192.168.1.12 centos ...

  8. POJ 3295 Tautology（构造法）

    http://poj.org/problem?id=3295 题意: 判断表达式是否为永真式. 思路: 把每种情况都枚举一下. #include<iostream> #include< ...

  9. python分享题目

    目前的分享题目:1 python在云计算虚拟教室领域的应用 2 python与虚拟货币(华三工程师) 3 python在移动游戏的实践(爪子) 4 python互联网敏捷运维实践(蓝雪) 5 pyth ...

  10. Linux——权限管理命令简单笔记

    首先linux中的权限分为三种rwx 代表字符 权限 对文件的含义 对目录的含义 r 读权限 可以查看文件 内容 (cat, more, head, tail) 可以列出目录中 的内容 (ls) w ...