什么时候手动调用$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. Python3 itchat实现微信定时发送群消息

    Python3 itchat实现微信定时发送群消息 一.简介 1,使用微信,定时往指定的微信群里发送指定信息. 2,需要发送的内容使用excel进行维护,指定要发送的微信群名.时间.内容. 二.py库 ...

  2. ArcThemALL！5.1：解压、脱壳、压缩样样精通

    原文链接:http://www.ithome.com/html/soft/57033.htm ArcThemALL!软件主要功能: 1.支持压缩和解压功能,支持常用的7z.zip.cab.iso.ra ...

  3. 20145317彭垚《网络对抗》Exp2 后门原理与实践

    20145317彭垚<网络对抗>Exp2 后门原理与实践 基础问题回答 例举你能想到的一个后门进入到你系统中的可能方式? 在网上下载软件的时候,后门很有可能被捆绑在下载的软件当中: 例举你 ...

  4. C++for的几种方式

    #include <algorithm> #include <vector> ////////////////////////////////////////////// , ...

  5. Python3基础 if嵌套示例

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

  6. P4879 ycz的妹子

    思路 让你干啥你就干啥呗 查询第x个妹子就get一下再修改 这里稳一点就维护了三个东西,也许两个也可以 代码 #include <iostream> #include <cstdio ...

  7. Springboot2.x 拦截器

    一,单个拦截器,实现接口  HandlerInterceptor @Component public class MyInterceptor1 implements HandlerIntercepto ...

  8. Git项目创建与提交

    创建Git密钥: 1.生成密钥: 右键–>Git Bash Here:先输入ssh-keygen –t rsa –C "邮箱地址",注意ssh-keygen之间是没有空格的, ...

  9. 【自动化】基于Spark streaming的SQL服务实时自动化运维

    设计背景 spark thriftserver目前线上有10个实例,以往通过监控端口存活的方式很不准确,当出故障时进程不退出情况很多,而手动去查看日志再重启处理服务这个过程很低效,故设计利用Spark ...

  10. Unity3D学习笔记（十一）：布料和协程

    延迟函数:动态资源加载:T:Resources.Load<T>(string path);Assets - Resources,Resources是一个资源管理的工具类,预制体放在Reso ...