什么时候手动调用$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. 基于qml创建最简单的android机图像采集程序

    前提是在已经搭建为android编写程序的qt平台上面,我们只需要简单几部就可以搭建最简单的android机图像采集程序 1.生成新的ququick app 2.在配置中添加 multimedia,因 ...

  2. 20145304 网络对抗技术 逆向与Bof基础

    20145304 网络对抗技术 逆向与Bof基础 实践目标 学习以下两种方法,运行正常情况下不会被运行的代码: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的 ...

  3. Zigbee学习

    (一)Zigbee简介和开发环境快速建立(IAR) 1.我不是很清楚控制链条,对于Zigbee不是太清楚 答案:CC2530 芯片上集成了 8051 内核(增强型) 2.性能特点:低速率远距离,这造就 ...

  4. 在浏览器输入url后并回车发生了哪些过程

    1.解析URL ________________________________________________________________________ 关于URL: URL(Universa ...

  5. pip install MySQL-python

    在win7下安装了python后,想安装python-mysql,使用pip安装出现如下问题: pip install MySQL-pythonbuild\lib.win-amd64-2.7\_mys ...

  6. MAC下BurpSuit社区版升级pro版

    环境OSX 步骤1. 官网下载社区版v1.7.32https://portswigger.net/burp/communitydownload 安装 2. 下载keygenhttps://down.5 ...

  7. ubuntu12 root账户自动登录

    Ubuntu为了系统安全,root帐号的密码是随机的,如果临时需要提升至root权限以执行一些命令,需要使用sudo命令.产线上有几台使用Ubuntu的机器,因为使用者不固定,并且执行程序时需要使 用 ...

  8. Java ArrayDeque源码剖析

    ArrayDeque 本文github地址 前言 Java里有一个叫做Stack的类,却没有叫做Queue的类(它是个接口名字).当需要使用栈时,Java已不推荐使用Stack,而是推荐使用更高效的A ...

  9. UVa 821 网页跳跃（Floyd）

    https://vjudge.net/problem/UVA-821 题意:给出一个有向图,任意两点都可相互到达,求任意两点的最短距离的平均值. 思路:求两点的最短距离,用Floyd算法很方便,最后加 ...

  10. UVa 1632 阿里巴巴（区间DP）

    https://vjudge.net/problem/UVA-1632 题意: 直线上有n个点,其中第i个点的坐标是xi,且它会在di秒之后消失.Alibaba可以从任意位置出发,求访问完所有点的最短 ...