AngularJS报错$apply already in progress的解决方法分析
本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考，具体如下：
如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest()，我们很可能会遇到类似下面的错误，虽然这个错误没有太大影响，但是在日志中看起来还是很不爽的，日志中记录的异常或者错误，就应该是需要关注和解决的问题，否则就没有必要出现在日志中了。
Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24apply at angular.js:63 at beginPhase (angular.js:14755) at Scope.$apply (angular.js:14499) at new <anonymous> (1%20-%20%E5%89%AF%E6%9C%AC.html:10) at Object.invoke (angular.js:4185) at extend.instance (angular.js:8454) at angular.js:7700 at forEach (angular.js:331) at nodeLinkFn (angular.js:7699) at compositeLinkFn (angular.js:7078)
下面这段代码就会报上面这个错误：
var myModule = angular.module('myModule', []);
myModule.controller("ctrl_1",function($scope){
$scope.value = "aty";
$scope.$apply();
//$scope.$digest();
});
这个错误其实很好理解：angularJS框架本身已经在做脏数据检测了，我们没有必要再手动调用$apply或者$digest。这里自然而然出现了一个疑问：什么时候需要我们手动调用$apply或者$digest，什么时候不需要呢？这是个好问题，我现在也不知道，目前我只能列出自己在项目中遇到的2种需要手动调用$apply的情况。
情况1：controller中如果有异步操作，比如ajax回调，timeout延时等。可以这么理解：由于异步(延迟)的存在，当开始执行回调函数的时候，angularJS自身controller中的脏值检测已经结束，无法检测到回调函数导致数据的变化。
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="angular.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.controller("ctrl_1",function($scope){
$scope.text = "place";
setTimeout(function(){
$scope.text = "value setted after time out";
$scope.$apply();//必需手动进行脏值检测,否则数据无法刷新到界面
},1000);
});
$(function(){
angular.bootstrap($("#div1")[0], ["myModule"]);
})
</script>
</head>
<body>
<div id="div1" ng-controller="ctrl_1">
<div>{{text}}</div>
<input id="btn" type="button" value="jquery-event"></input>
</div>
</body>
</html>
这段代码如果没有调用$scope.$apply()的话，数据是不会刷新到界面上的。
情况2：在jQuery代码中修改$scope中的数据。这种情况是在angular框架之外操作$scope中的数据，angular不能检测到数据变化是正常的。
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="angular.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.controller("ctrl_1",function($scope){
$scope.text = "place";
});
$(function(){
angular.bootstrap($("#div1")[0], ["myModule"]);
$("#btn").click(function(){
var $scope = $("#btn").scope();
$scope.text = "value setted in jquery";
$scope.$apply();
});
})
</script>
</head>
<body>
<div id="div1" ng-controller="ctrl_1">
<div>{{text}}</div>
<input id="btn" type="button" value="jquery-event"></input>
</div>
</body>
</html>
在JQuery的事件处理函数中，我们能够通过dom拿到其关联的$scope对象，进而修改$scope中的数据。这种情况下，也必需要手动调用$scope.$apply()。
也就是说我们必须要清楚哪儿些情况需要手动$apply，哪儿些情况不需要手动$apply，这看起来很简单，实际上并不是这样的。看一段我们项目中的代码：
var myModule = angular.module('myModule', []);
myModule.controller("ctrl_1",function($scope){
$scope.listItems = [];
$scope.loadListFromService = function(){
Spl.MessageProcessor.loadData({
serviceId : "url",
data : {},
success : function(json) {
$scope.listItems = json.results;
// 要不要$scope.$apply()?
},
error: function() {
console.error("invoke service["+optionsJson.serviceId+"] error.");
}
});
}
$scope.loadListFromService();
});
loadData()这个函数很像ajax回调，确实是这样的，这个API不过是做了一点封装，大致代码如下：
function loadData(options)
{
// 从本地缓存中读取,很快
var dataInCache = U.loadDataFromCache(options.serviceId);
if(dataInCache)
{
options.success(dataInCache);
}
else
{
//异步ajax
U.readDataFromServer(options.serviceId, options.data, function(response){
options.success(response);
});
}
}
由于缓存的影响，$scope.loadListFromService()变得不再那么可控，如果本地已经有缓存了，那直接读取缓存是很快的，这个时候不需要手动$apply；如果是第一次，本地没有缓存，那么就变成了情况1，我们需要手动$apply。显然调用loadData()函数的地方，不需要也不应该关注到底有没有缓存的存在，这个时候判断需要不要手动$apply就没有那么容易的。简单粗暴的方式，不管怎么样都手动调用下$scope.$apply()，这样功能不会有问题，但是日志中就不可避免要出现文中开头提到的错误。
angular中的$scope中提供了一个$$phase变量，如果这个变量的值是"$digest" 或者"$apply"，就代表angular自身已经在做脏值检测了，不需要我们再去调用$apply或者$digest；否则的话就需要我们手动调用$apply或者$digest了。利用这个属性，我们就可以方便解决上面的错误了，判断一下呗。下面是一个工具函数，好理解吧。
function safeApply(scope, fn) {
(scope.
phase||scope.$root.
phase) ? fn() : scope.$apply(fn);
}
最后提一下，$digest、$apply、$$phase这些属性或者方法其实都是$scope中的私有的，最好不要使用。如果你用到了这些方法，基本可以断言你的代码存在问题，没有按照angular的方式来组织代码。比如情况1中的setTimeout，完全可以用angular中的$timeout代替，这才是推荐的方式，而不是通过$apply来补救。
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="angular.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.controller("ctrl_1",function($scope, $timeout){
$scope.text = "place";
$timeout(function(){
$scope.text = "value setted after time out";
},1000);
});
$(function(){
angular.bootstrap($("#div1")[0], ["myModule"]);
})
</script>
</head>
<body>
<div id="div1" ng-controller="ctrl_1">
<div>{{text}}</div>
<input id="btn" type="button" value="jquery-event"></input>
</div>
</body>
</html>
所以解决“$apply already in progress”最好的方式，就是不要使用$scope.$apply()或者$scope.$digest()。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
模板视图和AngularJS之间冲突的解决方法
本文实例讲述了模板视图和AngularJS之间冲突的解决方法.分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = {something from databases}; $this->load->view('home/index',$data); 这里是对应的视图 <div ng-controller="loadData"> &l
-
AngularJS在IE8的不支持的解决方法
AngularJS一般不会选择IE8支持, 因为很多特性在IE8下效果很差, 性能也不好, 但是由于项目的需要, 客户的机器有些是XP, 只能够装IE8, 所以为了解决这个, 我查阅了相关的资料,发现GITHUT有一些对AngularJS的改进,我选择的是https://github.com/frankzye/angular.js-ie8-builds, 这是我Fork过来的,能够解决大部分问题,但是 有一点是在作Directive的时候,一定不要用Element去扩展, 否则会出错, 另外$h
-
AngularJS iframe跨域打开内容时报错误的解决办法
<iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:
-
AngularJS在IE下取数据总是缓存问题的解决方法
本文实例讲述了AngularJS在IE下取数据总是缓存问题解决方法.分享给大家供大家参考,具体如下: 问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJS的配置中通过$httpProvider来设置其不缓存.具体如下所示: ngApp.config(function ($httpProvider) { // Initialize get if no
-
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &
-
AngularJS ng-repeat数组有重复值的解决方法
前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang
-
AngularJS实现在ng-Options加上index的解决方法
本文实例讲述了AngularJS实现在ng-Options加上index的解决方法.分享给大家供大家参考,具体如下: Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用.但是也不是说对于这个问题我们就没有解决方案. 把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,
-
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
AngularJS 使用ng-repeat报错 [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in words"> {{word}} </div> [ng
-
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&
-
AngularJS上拉加载问题解决方法
项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据.但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果. 图1 客户端搜索栏 图2 服务端控制台 可以断定是客户端的业务逻辑出现了问题.返回到客户端,查看源码逻辑,修改如下: 控制器 $scope.medsearchMore = fu
-
AngularJS中update两次出现$promise属性无法识别的解决方法
前言 本文主要介绍的是在AngularJS中update两次出现$promise属性无法识别的解决方法,下面话不多说,先来看看错误提示,然后再看看解决的办法吧. 一.错误信息如下: ERROR 2015-12-02 14:33:17,653 http-bio-8080-exec-42 o.s.s.r.i.e.InternalErrorExceptionMapper - Unrecognized field "$promise" (class com.inetpsa.fnd.rest.c