How to Dismiss angular modal on URL change ? – User friendly Tech help
Requirement :-
nWe have a Angular bootstrap Modal to show a popup window. On clicking backspace / browser back button, we want to cancel the popup and continue with the url change. The default behaviour is that page behind the modal changes, but the modal remains on top.
nPlunker link for issue
nGitHub issue
n
nSolution :-
n
We have seen lot of people facing this challenging scenario . To overcome this issue is to write a directive in Angular JS.
n
nCode:-
n
napp.directive(‘discardModal’, [‘$rootScope’, ‘$modalStack’,
nfunction($rootScope, $modalStack) {
nreturn {
nrestrict: ‘A’,
nlink: function() {
n/**
n* If you are using ui-router, use $stateChangeStart method otherwise use $locationChangeStart
n* StateChangeStart will trigger as soon as the user clicks browser back button or keyboard backspace and modal will be removed from modal stack
n*/
n$rootScope.$on(‘$stateChangeStart’, function (event) {
nvar top = $modalStack.getTop();
nif (top) { $modalStack.dismiss(top.key); } }); } }; } ]);n
