Question

在以下无辜的情况下打开确认对话框时，我（有时）会得到一个奇怪的 $ apply in progress 错误：

＆＃13;

var mod = angular.module('app', []);

mod.controller('ctrl', function($scope, $interval, $http) {
  
  $scope.started = false;
  $scope.counter = 0;
  
  // some business function that is called repeatedly
  // (here: a simple counter increase)
  $interval(function() {
    $scope.counter++;
  }, 1000);
  
  // this function starts some service on the backend
  $scope.start = function() {
    if(confirm('Are you sure ?')) {
      return $http.post('start.do').then(function (res) {
        $scope.started = true;
        return res.data;
      });
    };
  };

  // this function stops some service on the backend
  $scope.stop = function() {
    if(confirm('Are you sure ?')) {
      return $http.post('stop.do').then(function (res) {
        $scope.started = false;
        return res.data;
      });
    };
  };

});

// mock of the $http to cope with snipset sandbox (irrelevant, please ignore)
mod.factory('$http', function ($q) {
  return {
    post: function() {
      return $q.when({data:null});
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
    <button ng-disabled="started" ng-click="start()">Start</button>
    <button ng-disabled="!started" ng-click="stop()">Stop</button>
    <br/><br/>seconds elapsed : {{counter}}
  </div>
</div>

＆＃13;

错误消息是：

$ rootScope：inprog] $申请已在进行中http://errors.angularjs.org/1.2.23/ $ rootScope / inprog？p0 =％24apply

并且callstack是：

minErr/<@angular.js:78:12
beginPhase@angular.js:12981:1
$RootScopeProvider/this.$get</Scope.prototype.$apply@angular.js:12770:11
tick@angular.js:9040:25
$scope.start@controller.js:153:8
Parser.prototype.functionCall/<@angular.js:10836:15
ngEventHandler/</<@angular.js:19094:17
$RootScopeProvider/this.$get</Scope.prototype.$eval@angular.js:12673:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@angular.js:12771:18
ngEventHandler/<@angular.js:19093:15
jQuery.event.dispatch@lib/jquery/jquery-1.11.2.js:4664:15
jQuery.event.add/elemData.handle@lib/jquery/jquery-1.11.2.js:4333:6

重现：

使用Firefox（我无法使用Chrome或IE重现）
打开javascript控制台
单击开始和停止按钮（并确认对话框）
尝试多次（10-20x），不容易发生

如果我删除确认对话框，问题就会消失。

我已阅读AngularJS documentation有关此错误（以及其他stackoverflow问题），但我不知道这种情况如何适用，因为我不调用$ apply，也不直接与DOM交互。

Answer 1

经过一些分析，它似乎是Firefox中$ interval和模态对话框之间令人惊讶的交互。

有什么问题？

callstack显示一些奇怪的东西：在控制器的 start 函数中调用AngularJS函数 tick 。怎么可能？

好吧，似乎Firefox does not suspend the timeout/interval functions when displaying a modal dialog box：这允许在当前正在执行的javascript代码的顶部将配置的超时和间隔回调称为。

在上述情况下，使用 $ apply 序列调用 start 函数（单击按钮时由AngularJS启动）和 $ interval 回调在 start 函数的顶部执行，第二个 $ apply 序列被启动（由AngularJS提供）=＆gt;繁荣， $申请已经在进行中错误被提出。

可能的解决方案

定义新的确认服务（改编自this和that博文）：

// This factory defines an asynchronous wrapper to the native confirm() method. It returns a // promise that will be "resolved" if the user agrees to the confirmation; or // will be "rejected" if the user cancels the confirmation. mod.factory("confirm", function ($window, $q, $timeout) { // Define promise-based confirm() method. function confirm(message) { var defer = $q.defer(); $timeout(function () { if ($window.confirm(message)) { defer.resolve(true); } else { defer.reject(false); } }, 0, false); return defer.promise; } return confirm; });

...并按以下方式使用它：

// this function starts some service on the backend $scope.start = function() { confirm('Are you sure ?').then(function () { $http.post('start.do').then(function (res) { $scope.started = true; }); }); }; // this function stops some service on the backend $scope.stop = function() { confirm('Are you sure ?').then(function () { $http.post('stop.do').then(function (res) { $scope.started = false; }); }); };

此解决方案有效，因为模式对话框在间隔的回调执行中打开，并且（我相信）间隔/超时执行由javascript VM序列化。

Answer 2

我在Firefox中遇到了同样的问题。使用window.confirm而非confirm为我修复了它。

＆＃34; $申请已在进行中＆＃34;用Firefox打开确认对话框时

2 个答案: