华山资源网

AngularJS报错$apply already in progress的解决方法分析
网络编程 2024/9/25 佚名
3 1

本文实例分析了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"htmlcode">



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="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">


这段代码如果没有调用$scope.$apply()的话，数据是不会刷新到界面上的。


情况2：在jQuery代码中修改$scope中的数据。这种情况是在angular框架之外操作$scope中的数据，angular不能检测到数据变化是正常的。





<html>
 <head>
  <script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">


在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()"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) "htmlcode">



<html>
 <head>
  <script src="/UploadFiles/2021-04-02/jquery-1.11.1.min.js">


所以解决“$apply already in progress”最好的方式，就是不要使用$scope.$apply()或者$scope.$digest()。


更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》


希望本文所述对大家AngularJS程序设计有所帮助。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com