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, DELETE, or CANCEL?" and stay on the current "page" if the user selects cancel. I don't see any events that allow listeners to cancel a route change.
3 Answers
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.
-
3how to continue changing? For example - show message "Do you want change page?" - Yes - No. On Yes - continue, on "NO" stop. Commented Mar 11, 2014 at 12:26
-
This is no good if you need access to the routing parameters. Really irritating that the route can't be canceled from the route change start event. Commented Aug 30, 2014 at 2:24
-
1Nope. Does not cancel the route location change at all, AFAICT. The event.preventDefault() appears to do nothing. Commented Sep 17, 2014 at 4:53
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.
-
2But even when rejected, browser url is changed. How to deal with that?– FelikZCommented May 18, 2013 at 12:08
-
You can change the location back yourself with a service that watches the root scope for $locationChangeSuccess. This is what the $route service uses internally but I don't know if it's completely safe to rely on it staying public in the future. However, you could combine this with $routeChangeError for now to restore the old location. Perhaps it's worth asking the maintainers about.– tilgoviCommented Jun 11, 2013 at 3:04
-
1@FelikZ FYI, the relevant Angular issue to watch is github.com/angular/angular.js/issues/2100– SamCommented Oct 25, 2013 at 7:05
$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();
});
}