AngularJS - Detecting, stalling, and cancelling route changes

Question

I can see the event $routeChangeStart in my controller, but I don\'t see how to tell Angular to stay. I need to popup something like \"Do you want to SAVE, DELE

Answer 1

The documented way of doing this is to use the resolve property of the routes.

The '$route' service documentation says that a '$routeChangeError' event is fired if any of the 'resolve' promises are rejected.1 That means you can use the '$routeProvider' to specify a function which returns a promise that later gets rejected if you would like to prevent the route from changing.

One advantage of this method is that the promise can be resolved or rejected based on the results of asynchronous tasks.

Answer 2

You are listening to the wrong event, I did a bit of googling but couldn't find anything in the docs. A quick test of this:

$scope.$on("$locationChangeStart", function(event){
    event.preventDefault();
})

In a global controller prevented the location from changing.

Answer 3

$scope.$watch("$locationChangeStart", function(event){
    event.preventDefault(); 
});

You can do like this as well. Benefit of doing this way is that it doesn't trigger through if() statement with $on ...as you well see that below code will trigger no matter what the condition is:

if(condition){ //it doesn't matter what the condition is true or false
  $scope.$on("$locationChangeStart", function(event){ //this gets triggered
     event.preventDefault();  
  }); 
}