Ability to cancel $routeChangeStart event #5581
Description
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!