Ability to cancel $routeChangeStart event

[yentheo]

Hi, I have an issue which seems to occur more often in the community.
It's the same as #592 and multiple stackoverflow posts (http://stackoverflow.com/questions/14895016 - http://stackoverflow.com/questions/16344223 etc)
Some of these issues were resolved by using locationChangeStart.

It would work too for me, if not for the next problem.

I'm making an app with some standard pages like a home-page and a contact-page. Then we have some kind of wizard. The routes look like this.

$routeProvider.
    when('/home', { controller: 'homeController', templateUrl: '/home.html'}).
    when('/contact', { controller: 'contactController', templateUrl: '/contact.html'}).
    when('/wizardPage1', { controller: 'wizardPageOneController', templateUrl: '/wizardPage1.html', wizard: true}).
    when('/wizardPage2', { controller: 'wizardPageTwoController', templateUrl: '/wizardPage2.html', wizard: true}).
    when('/wizardPageSave', { controller: 'wizardPageSaveController', templateUrl: '/wizardPageSave.html', wizard: true}).
    otherwise({ redirectTo: '/home' });

Now I can complete the wizard and save on the WizardSavePage. But what I want is when I'm on WizardPage2 and I navigate to home or contact, I want to show a confirmation "You have unsaved changes. Do you want to continue" or something.

The easiest code would be:

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    if (!wizardService.saved && current.wizard && !next.wizard) {
        if (!confirm("You have unsaved changes. Do you want to continue?")) {
            event.preventDefault();
        }
    }
});

But this does not work, obviously. I could do this with locationChangeStart but then I lose all the route data.

What would be the best way to make something like this?

Thanks in advance!

[IgorMinar]

This is not ideal, but you could just listen on $routeChangeStart and keep references to current and next route. Then when the $locationChangeStart event is broadcasted you can use the kept references to determine if you want to abort or not.

$routeChangeStart always fires before $locationChangeStart.

[yentheo]

You suggest something like this:

var currentRoute, nextRoute;

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    currentRoute = current.$$route;
    nextRoute = next.$$route;
});

$rootScope.$on("$locationChangeStart", function (event, next, current) {
    if (!wizardService.saved && currentRoute.wizard && !nextRoute.wizard) {
        if (!confirm("You have unsaved changes. Do you want to continue?")) {
            event.preventDefault();
        }
    }
});

I thought there may be some functionality on the routeProvider to get the route data based on a url. Something like:

var routeData = $routeProvider.getRoute('/someUrl/5');

Thanks for your answer, btw.

[yentheo]

I have just given this a try... It did not work. $locationChangeStart fires before $routeChangeStart.
I should add that I don't use $location.path to navigate but I always use hyperlinks.

Maybe that changes something in the order?

[khellang]

👍 For the proposed fix. Too bad I can't use it right away 😄

[caitp]

I was bored and decided to push a clean patch for this @yoerlemans --- but if you reopen a PR I'll take a look at it and close mine.

[jakubsikora]

@IgorMinar, @yoerlemans so... any other alternative for this? How can I stop the change after the next route has been parsed? As the parseRoute API is not exposed, is my only alternative to copy that code into my app and parse the paths in $locationChangeStart by myself? I need the route definition for checking things like permissions.