$digest already in progress 解决办法——续
什么时候手动调用$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处理。
随机推荐
- 20145220韩旭飞《网络对抗》实验五:MSF基础应用
20145220韩旭飞<网络对抗>实验五:MSF基础应用 主动攻击 首先,我们需要弄一个xp sp3 English系统的虚拟机,然后本次主动攻击就在我们kali和xp之间来完成. 然后我 ...
- 2019“嘉韦思”杯RSA256题目wp
首先我们从网站下载了一个压缩包,解压出来一看里面有2个文件 首先我们先打开fllllllag康康,结果发现是一串乱码,这时候第一反应就是,文件被加密了,再看fllllllag下面的gy.key文件,更 ...
- Java查找算法之二分查找
二分查找是一种查询效率非常高的查找算法.又称折半查找. 一.算法思想 有序的序列,每次都是以序列的中间位置的数来与待查找的关键字进行比较,每次缩小一半的查找范围,直到匹配成功. 一个情景:将表中间位置 ...
- AndroidStudio V2.0.0.汉化
汉化包下载:http://pan.baidu.com/s/1kVKYUjH AndroidStudio V2.0.x.版汉化工作介绍 resource_en.jar------> resourc ...
- Spring编译AOP项目报错
警告: Exception encountered during context initialization - cancelling refresh attempt: org.springfram ...
- hadoop项目实战--ETL--(三)实现mysql表到HIVE表的全量导入与增量导入
一 在HIVE中创建ETL数据库 ->create database etl; 二 在工程目录下新建MysqlToHive.py 和conf文件夹 在conf文件夹下新建如下文件,最后的工程目录 ...
- [原][库][c++]tinyxml使用小结
参考:http://blog.csdn.net/L_Andy/article/details/40615517 tinyxml官网: http://www.grinninglizard.com/tin ...
- 修改LinuxMint18更新软件源
参考文章: http://blog.csdn.net/Notzuonotdied/article/details/53908154 修改软件源 点击Menu->Administration-&g ...
- 【Docker】性能测试监控平台搭建:InfluxDB+Grafana+Jmeter+cAdvisor
前言 在做性能测试时,如果有一个性能测试结果实时展示的页面,可以极大的提高我们对系统性能表现的掌握程度,进而提高我们的测试效率.但是我们每次打开Jmeter都会有几个硕大的字提示别用GUI模式进行负载 ...
- 你的centos/linux下有多个php.ini,不确定是哪个时
你的centos/linux下有多个php.ini,不确定是哪个时,但是你自己知道,你的php安装目录. 比如我的php安装目录是 /usr/local/php 那么可以通过命令来查找php.ini的 ...