什么时候手动调用$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. 01: socket模块

    网络编程其他篇 目录: 1.1 socket理论部分 1.2 socket处理单个连接 和 同时接受多个连接 1.3 socket实现远程执行命令,下载文件 1.4 通过socket实现简单的ssh ...

  2. 从Oracle到MySQL，余额宝云实践分享

    原文链接:http://www.csdn.net/article/2013-11-/2817426-interview-financial-case-yuerbao-aliyun07 余额宝.百度百发 ...

  3. 《课程设计》——cupp的使用

    <课程设计>--cupp的使用 cupp简介 cupp是强大的字典生成脚本.它是一款用Python语言写成的可交互性的字典生成脚本.尤其适合社会工程学,当你收集到目标的具体信息后,你就可以 ...

  4. 20145322何志威《网络对抗技术》Exp6 信息搜集技术

    20145322何志威<网络对抗技术>Exp6 信息搜集技术 实验内容 掌握信息搜集的最基础技能: (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发 ...

  5. Git 基础 —— 常见使用场景

    Git 基础学习系列 Git 基础 -- 安装 配置 别名 对象 Git 基础 -- 常用命令 Git 基础 -- 常见使用场景 Git基础 -- Github 的使用 突然插入 Bugifx 工作, ...

  6. 在ubuntu16.04上搭建视频服务器

    推荐方案三:超级简单 方案一.hls (缺陷:需要花很多时间切片) 1.Distributor ID: Ubuntu  Description: Ubuntu 16.04.3 LTS  Release ...

  7. SQL Over

    与over函数结合的几个函数 create table #tab(A varchar(), B varchar()) insert into #tab select 'A1', 'B1' union ...

  8. WannaflyCamp 平衡二叉树（DP）题解

    链接:https://www.nowcoder.com/acm/contest/202/F来源:牛客网 题目描述 平衡二叉树,顾名思义就是一棵“平衡”的二叉树.在这道题中,“平衡”的定义为,对于树中任 ...

  9. 【复制虚拟机】虚拟机复制后无ip的问题

    先编辑虚拟机选项,把网络适配器删掉后保存,再重新添加网络适配器 然后开机 编辑文件/etc/udev/rules.d/70-persistent-net.rules,进去之后是这个样子 把前两个删掉, ...

  10. Jmeter高阶学习，运用NotePad++编写工程，随意复制多个工程到同一个工程

    Jmeter创建了工程之后,保存文件后就是一个jmx后缀的文件,你有没有试过单独用文本编辑器打开文件,编辑文件? Step1: 最简单的Jmeter工程,只有一个测试计划 <?xml versi ...