什么时候手动调用$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. adb shell 命令详解,android, adb logcat

    http://www.miui.com/article-275-1.html http://noobjava.iteye.com/blog/1914348 adb shell 命令详解,android ...

  2. 05: python中的函数

    1.1 python 函数   1.函数作用 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得 ...

  3. 20145127《java程序设计》第八周学习总结

    一.教材学习内容总结 第十四章 NIO与NIO2 NIO(New IO)-from JDK1.4 NIO2 -from Java SE 7 14.1 认识NIO Channel: 衔接数据节点(与IO ...

  4. VC++创建快捷方式、删除快捷方式、添加开始菜单程序组菜单并删除程序组菜单的实例

    转载:http://www.codefans.net/articles/1435.shtml 转载:http://www.cnblogs.com/morewindows/archive/2011/08 ...

  5. cogs 444. [HAOI2010]软件安装

    ★★☆   输入文件:install.in   输出文件:install.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述]现在我们的手头有N个软件,对于一个软件i,它要 ...

  6. luogu P1880石子归并

    石子归并 luogu1880 传送门   noi1995 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得 ...

  7. HDU 4638Group (莫队)

    Group Problem Description There are n men ,every man has an ID(1..n).their ID is unique. Whose ID is ...

  8. Unity3D学习笔记(二十五):文件操作

    文件是什么? 存储在硬盘上的最后的节点. 文件夹是什么? 文件的上级单位称为文件夹. 文件夹的基本结构? 文件夹是层级化结构的,对于同级的文件夹不可以重名,父文件夹和子文件夹可以同名> IO:I ...

  9. java对象在内存的大小

    前言 一直以来,对java对象大小的概念停留在基础数据类型,比如byte占1字节,int占4字节,long占8字节等,但是一个对象包含的内存空间肯定不只有这些. 假设有类A和B,当new A()或者n ...

  10. RTC(x86)

    RTC 原创,转载请写明出处. 一直以来想写一篇关于RTC的总结,可是人太懒,在读完John Z. Sonmez大伽的<软技能代码之外的生存技能>后,终于下定决心,完成这项早已计划中的任务 ...