6

So I have an AngularJS service listening for some events. On the handling of these events I need to call different controllers and ultimately load a new view. In one event handler I am using $location.path() then calling $rootScope.apply() to trigger the routing to the controller. This works fine for that event, but in others I get the following error: $rootScope:inprog Action Already In Progress. I'm guessing that it works in the first scenario because $rootScope.apply() is called from another callback function inside the listener function, where as the other handlers try to call it just from the event listener function. 

//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
});

How can I get it to work for all event handlers?

plnkr example

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
user1491636
  • 2,355
  • 11
  • 44
  • 71

1 Answers1

11

The problem is that it's performing $digest on $rootScope twice in quick succession and it throws the error when there's an overlap. To get around this, you can simply wrap both calls to $location.path() in $timeout, as you have done the first time in your plnkr example. This will force it to wait for the $digest cycle to complete.

You may also remove the explicit calls to $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");
  });
});

Note:

This code is based on the plnkr example, which is slightly different than the code in the original post.

Reference:

wait for end of $digest cycle

Community
  • 1
  • 1
aw04
  • 10,857
  • 10
  • 56
  • 89