什么时候手动调用$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. 微信小程序编写新闻阅读列表

    微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...

  2. java项目跑起来报错: 程序报 SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". 错误

    问题: 我用的是ssm框架结合, 利用junit测试的时候抛出 SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder& ...

  3. 20145335郝昊《网络攻防》Exp4 Adobe阅读器漏洞攻击

    20145335郝昊<网络攻防>Exp4 Adobe阅读器漏洞攻击 实验内容 初步掌握平台matesploit的使用 有了初步完成渗透操作的思路 本次攻击对象为:windows xp sp ...

  4. java读书笔记二

    这是我的一些读书笔记: 我研究了一下面向对象: 面向对象符合人类看待事物的一般规律,对象的方法的实现细节是包装的,只有对象方法的实现者了解细节 我觉得面向过程是由过程.步骤.函数组成,过程是核心,面向 ...

  5. Android 实践项目开发二

    在地图开发中项目中,我这周主要完成的任务是和遇到的问题是以下几个方面. 1.在本次的项目中主要是利用百度地图的.jar包实现地图的定位与搜索功能,需要在百度地图开发中心网站取得 密钥,并下载相关.ja ...

  6. STM32.printf

    printf("\r\n this is a usart printf demo \r\n"); Use Micro LIB 需要勾选这个库 将串口定义成 printf 函数 #i ...

  7. HDU1560 DNA sequence（IDA*）题解

    DNA sequence Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  8. 从nodejs到在线商城

    nodejs安装express开发框架 (开发环境:mkdir nodeshop && cd nodeshop > npm init > npm install expre ...

  9. jekins 实现Django项目的自动部署(ubuntu16.04,python2.7,django1.11)

    1.依赖的插件 如果插件下载失败 更换源 http://mirror.xmission.com/jenkins/updates/current/update-center.json 因为我们只需要构建 ...

  10. Jmeter ResponseAssertion 【Ignore Status】

    在Jmeter源码中AssertionGui.java中,定义了Ignore Status的作用域 /** * Checkbox to indicate whether the response sh ...