$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处理。
随机推荐
- 「不定期更新」MacOS 编辑器使用小技巧
Visual Studio Code Ctrl + CMD + 上下箭头:上下移动当前的代码块: Shift + Alt + 上下箭头:快速复制当前的代码块: 我最新欢的插件列表: Prettier: ...
- ReadResolve方法与序列化
使用枚举实现的单例模式,不但可以防止利用反射强行构建单例对象,而且可以在枚举类对象被反序列化的时候,保证反序列的返回结果是同一对象. 对于其他方式实现的单例模式,如果既想要做到可序列化,又想要反序列化 ...
- 【详解】Dubbo的原理以及详细原理、配置
Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. Dubbo的应用 用于大规模 ...
- springBoot 打包 dubbo jar包
参看链接:http://blog.csdn.net/cqdz_dj/article/details/51942681 http://blog.csdn.net/u014695188/art ...
- [shiro] - 怎样使用shiro?
shiro是什么? Shiro是apache旗下的一个开源框架, 它将软件系统的安全认证相关的功能抽取出来, 实现用户身份认证, 权限授权, 加密, 会话管理等功能, 组成一个通用的安全认证框架. 为 ...
- 解决 E: Unable to correct problems, you have held broken packages. 问题
参考: Unable to correct problems, you have held broken packages 环境 Ubuntu 14.04, 64bit 问题 在安装gcc-4.9的时 ...
- Apache+Php+Mariadb+NFS+discuz
安装LAMP服务器,并利用discuz做测试 nfs + discuz 192.168.108.158 php + DNS 192.168.108.160 apache ...
- vscode中使用EF脚手架生成数据库上下文(scaffold-dbcontext)
目前在vscode上用netcore + ef core,在用dbfirst的方式生成模型和context上下文一直没有找到方法,之前在vs2017中,的nuget管理控制台输入命令: Scaffol ...
- pandas demo 示例
#构造 import pandas as pd import pickle import numpy as np dates=pd.date_range() df = pd.DataFrame(np. ...
- OpenVPN Windows 平台安装部署教程
一.环境准备: 操作系统Windows 服务器IP:192.168.88.123 VPN:192.168.89.1 客户端IP:192.168.78.3 客户端服务端单网卡,路由器做好端口映射 安装 ...