什么时候手动调用$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. JS获取周、月、季度日期

    效果: 代码: //用于获取日期本周.本月.本季度的js //Author : guanghe //文件引用方法:<script src="${staticPath}/common/j ...

  2. 20145335郝昊《网络攻防》Exp5 MS08_067漏洞测试

    20145335郝昊<网络攻防>Exp5 MS08_067漏洞测试 实验内容 了解掌握metasploit平台的一些基本操作,能学会利用已知信息完成简单的渗透操作. 漏洞MS08_067: ...

  3. 20165211 2017-2018-2 《Java程序设计》第6周学习总结

    20165211 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 本周,我学习了书本上第八.十五两章的内容,以下是我整理的主要知识. 第八章 常用实用类 St ...

  4. 字符串分割(C++)(转载)

    转载出自:http://www.cnblogs.com/MikeZhang/archive/2012/03/24/MySplitFunCPP.html 经常碰到字符串分割的问题,这里总结下,也方便我以 ...

  5. BZOJ 1049 数字序列(LIS)

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1049 题意:给出一个数列A,要求:(1)修改最少的数字使得数列严格递增:(2)在( ...

  6. FAST:NetMagic交换机 与 Floodlight控制器 连接实战

    设备 NetMagic 08交换机 - 1; 装有Windows 7系统的PC - 1; VMware Workstation, Ubuntu 14.04 64bit - 1; 网线 - 1; 网口转 ...

  7. UVa 242 邮票和信封(完全背包)

    https://vjudge.net/problem/UVA-242 题意: 输入s(每个信封能粘贴的最多邮票数量)和若干邮票组合,选出最大连续邮资最大的一个组合(最大连续邮资也就是用s张以内的邮票来 ...

  8. IEnumerable与IEnumerator

    IEnumerable接口 IEnumerable接口:实现该接口的类,表明该类下有可以枚举的元素 public interface IEnumerable { //返回一个实现了IEnumerato ...

  9. List<T>随机返回一个

    /// <summary> /// 随机返回一条数据 /// </summary> /// <param name="list"></pa ...

  10. python排序(插入排序) 从小到大顺序

    def insert_sort(ilist): for i in range(len(ilist)): for j in range(i): if ilist[i] < ilist[j]: il ...