angularjs - 快速连续调用$ rootScope。$ apply()时，$ digest已经在进行中

Question

所以我有一个AngularJS服务来监听一些事件。在处理这些事件时，我需要调用不同的 Controller 并最终加载一个新 View 。在一个事件处理程序中，我使用$ location.path()然后调用$ rootScope.apply()触发到 Controller 的路由。对于该事件，此方法工作正常，但在其他事件中，出现以下错误:$rootScope:inprog Action Already In Progress。我猜它在第一种情况下有效，因为$ rootScope.apply()是从监听器函数内的另一个回调函数调用的，而其他处理程序仅尝试从事件监听器函数调用它。

//angular service

$rootScope.$on('MY_EVENT', function (event, msg) {
    MyClass.doSomething(msg, function (response) {
        $location.path("/view1");
        $rootScope.$apply();        //WORKS FINE
    });
});


$rootScope.$on('MY_OTHER_EVENT', function (event, msg) {
    $location.path("/view2");
    $rootScope.$apply();           //ERROR
});

如何使它适用于所有事件处理程序？

plnkr example

Answer 1

问题在于，它在$digest上连续快速执行了两次$rootScope，并且在出现重叠时抛出错误。要解决此问题，您可以像在plnkr示例中第一次完成一样，将两个对$location.path()的调用都包装在$timeout中。这将迫使它等待$digest周期完成。

您也可以删除对$rootScope.$apply()的显式调用。

$rootScope.$on('FIRST_EVENT', function(event, msg) {
  $timeout(function() {
    $location.path("/view1");
  });
});

$rootScope.$on('SECOND_EVENT', function(event, msg) {
  $timeout(function() {
    $location.path("/view2");
  });
});

注意:

该代码基于plnkr示例，该示例与原始文章中的代码略有不同。

引用:

wait for end of $digest cycle