63

I have a question similar to this one, but different.

Here I am trying to add an event listener for a window.postMessage handler.

app.run(function ($location, $window, $rootScope) {
  $window.addEventListener('message', function(e) {
      $location.path("/abc");
      console.log($location.path()); // this prints "/abc" as expected

      $rootScope.$apply(); // this has no effect

      $scope = angular.element(document).scope(); // this is the same as $rootScope
      $scope.$apply(); // so this also has no effect
  });
});

The $location.path isn't being recognised by Angular.

The other question says that I should call $apply() on the scope, but the only scope available to me is $rootScope and calling $apply() on that doesn't seem to work.

A comment on the answer suggests that a scope can be got with 

$scope = angular.element(document).scope()

but this gives me the $rootScope, which doesn't work.

How do I get angular to regocnise the change in $location.path()? Is there a better way to register a message callback in such a way as I can change the path?

Community
  • 1
  • 1
Joe
  • 46,419
  • 33
  • 155
  • 245

4 Answers4

119

You should run the expression as function in the $apply() method like

app.run(function ($location, $window, $rootScope) {
  $window.addEventListener('message', function(e) {
      $rootScope.$apply(function() {
        $location.path("/abc");
        console.log($location.path());
      });
  });
});

See documentation - ng.$rootScope.Scope.

If you want to improve testability, use $console instead of console and inject that object as well.

Thomas
  • 11,272
  • 2
  • 24
  • 40
  • 3
    Brilliant, thanks very much. (I was only using the log for the purpose of illustrating this question). – Joe Oct 14 '13 at 12:29
  • 5
    This does not work for me, as I get a digest already in progress error. I don't understand why the $apply should be necessary to begin with, angular should be aware of the path change since you are using the $location service to instigate it. – gregtzar Oct 30 '13 at 18:16
  • 5
    Update: Calling $location.replace() on the line after I call $location.path() fixed it for me. No need for $apply(). – gregtzar Oct 30 '13 at 18:21
  • 1
    Although the OP is using `$rootScope`, I think that `$scope` should suffice. – Jim G. Nov 06 '14 at 01:58
10

The accepted solution is not the appropriate way to do it. Ideally you shouldn't need to interfere with the digest cycle (which $apply() does).

The best way according to me is calling $location.path() from the MainController. Use $emit - $on to send it to the MainController and have a function call $location.path from there. It will redirect you flawlessly without having to interfere with the digest cycle. I hope this helps someone.

Dhruv Batheja
  • 2,140
  • 1
  • 18
  • 16
  • I'm in the main controller, trying to use location, but it's not working. I tried the accepted solution, sometimes it works, sometimes it does not, angular complains about the digest cycle when this happens. Can I emit an event to somewhere and catch it? Remember I'm in the main controller. And, if possible, how to catch it? – Mateus Pires Dec 21 '16 at 04:45
  • @MateusPires use $timeout it will not trigger a digest when one is taking place, but when it all finishes. – Sten Muchow Mar 21 '17 at 15:42
1

I had the same problem, my mistake was that I was running the ng-click directive badly on my item.

Bad example: 

<a **href="#"** ng-click="myFunctionChangeLocationPath()">...

Example well:

<a ng-click="myFunctionChangeLocationPath()">...

And so you can correct the problem!

brasofilo
  • 25,496
  • 15
  • 91
  • 179
Christian Irack
  • 59
  • 1
0

There is solution without $timeout.

Just prevent redirect to default state before using $state.go

event.preventDefault();
$state.go('root');
lifemixture
  • 1