`

理解和解决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的情况。

情况一:

  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()的话,数据是不会刷新到界面上的。

 

情况二:

  在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()。

 

参考文章:Prevent error $digest already in progress when calling $scope.$apply()

分享到:
评论

相关推荐

    AngularJS报错$apply already in progress的解决方法分析

    本文实例分析了AngularJS报错$apply already in progress的解决方法。分享给大家供大家参考,具体如下: 如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这...

    基于SpringBoot+Vue的“智慧食堂”设计与实现(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    历届奥运会奖牌数据(1896-2024年).xlsx

    本次分享的数据为1896年-2024年(从雅典到巴黎)间奥运会奖牌数据,包括年份、届次、国家地区、名次、金牌、银牌、铜牌等数据,含免费下载链接 ## 一、数据介绍 数据名称:历届奥运会奖牌数据 数据范围:世界各国 样本数量:1877条 数据年份:1896年-2024年 数据说明:包括届次、国家、名次等数据

    基于SpringBoot+Vue的实习管理系统(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    【人机交互】MATLAB直车道线检测.zip

    【人机交互】MATLAB直车道线检测

    基于SSM+JSP的KTV点歌系统+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    基于SSM+JSP的课程在线教育资源管理系统(1)+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    2023年计算机硬件的组装实验报告.pdf

    2023年计算机硬件的组装实验报告.pdf

    springboot大学生租房系统 LW PPT.zip

    ava项目springboot基于springboot的课程设计,包含源码+数据库+毕业论文

    Flutter分析:带有质量平衡部分机翼的MATLAB计算(含Elastic轴与中心对齐)

    内容概要:本文档主要针对含有质量平衡段(即弹性轴和重心重合点xa=0)的硬翼Flutter问题提供了MATLAB解决方案。文档通过迭代的方式对一系列参数(如频率比(fr)、弹性轴(E)和半径(r)等)进行操作,并利用贝塞尔函数(Kn)来评估flutter速度(UFhat),从而预测了不同质比(mu)下flutter的缩减速度变化情况。同时,文档包含了绘图命令以视觉展示减小颤振速度随质量比变化的趋势以及相应的MATLAB代码。 适合人群:航空工程、飞行器动力学领域的科研工作者,工程师及研究生。尤其是那些从事飞行安全性和稳定性研究的专业人士。 使用场景及目标:主要用于解决飞行器设计过程中遇到的具体颤振问题,能够为设计新型飞机或其他有翼飞行物体提供科学依据和技术支持。它还能够辅助教育,帮助相关专业的学生理解flutter现象及其预防措施。 其他说明:此文件是以数值方法探讨带质量平衡的翅膀颤振特性的实例,在工程上有着重要意义。对于希望深入学习此类问题的人来说,这是一个极好的参考资料和实验平台。然而,实际应用还需要进一步考虑真实条件下的复杂因素,因此需要更多的专业知识和背景资料的支持。

    基于JAVA的机场航班起降与协调管理系统&毕业设计&毕业论文&数据库&演示视频&源代码

    本次项目是设计一个基于JAVA的机场航班起降与协调管理系统。 (1)在经济可行性上来分析的话,该软件是机场内部使用的一个指挥协调软件,属于航空安全投资,本软件开发成本并不高,软件和服务器数据库可以用机场原有的数据库进行开发,比起空难给航空公司造成的损失来说九牛一毛。 (2)在技术可行性上来分析的话,该软件主要运用了Java技术、jQuery-easyui和Mysql数据库技术。Java是到目前来说最稳定的、最可靠的软件开发工具;jQuery-easyui虽然是比较新的前台开发技术,但是他的界面新颖整洁,适合于功能性软件的开发;Mysql数据库也是许多大公司都采用的软件项目开发数据库,不仅稳定而且性能可靠,可以用作本次软件的开发。 (3)在法律可行性上来分析的话,该软件使用的技术都为开源的软件开发工具和语言,虽然Java等开发技术都存在Sun公司的版权问题,但是Java技术是可以免费使用的,没有涉及到法律上的侵权。 (4)在方案可行性上来分析的话,此次软件开发的很大一部分精力都放在了软件的需求分析和设计方面,设计出来的软件可以很好地去实现我们所要完成的软件预先设计的功能。

    2023年计算机与通信网络实验报告.pdf

    2023年计算机与通信网络实验报告.pdf

    2023年四川省德阳市统招专升本计算机自考真题(含答案).pdf

    2023年四川省德阳市统招专升本计算机自考真题(含答案).pdf

    基于SSM+JSP的农产品供销服务系统+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    篮球论坛系统--论文.zip

    Java项目基于springboot的课程设计,包含源码+数据库+毕业论文

    基于SpringBoot+Vue的致远汽车租赁系统(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目,仅供学习参考。 Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    GUI面板MATLAB答题纸试卷自动识别.zip

    GUI面板MATLAB答题纸试卷自动识别

    Java毕业设计-SpringBoot+Vue的班级综合测评管理系统(附源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    springboot大学生体质测试管理系统--论文.zip

    ava项目springboot基于springboot的课程设计,包含源码+数据库+毕业论文

    美国机器人渗透度(工具变量).dta

    美国工业机器人渗透度是衡量自动化技术在制造业和其他工业领域应用程度的重要指标,可帮助研究制造业自动化趋势、劳动力市场变化,以及智能制造对经济的影响,同时,本分享数据也可用作工业机器人工具变量 ## 一、美国工业机器人渗透度数据的介绍 数据年份:2011-2019年 数据范围:美国各行业 数据格式:excel、dta

Global site tag (gtag.js) - Google Analytics