To prevent accidental closing of page on the browser, you can set the Confirm Message when refresh or close or forward or backward the page via Javascript and AngularJs.
On Plain javascript, however you can also add the below code into AngularJs Controller
// Event Trigger when refreshing/Closing the page.
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compatable
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Submission form not complete yet, Are you sure you want to leave this page?'; // a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
On AngularJs State Changes, put the below code inside the particular controller.
// Event Trigger when clicking browser Back or Forward buttons
$scope.$on('$locationChangeStart', function( event ) {
$scope.pagePreventAlert();
event.preventDefault();
});
Sample AlertService
I have created the sample AlertService AngularJs Service to prompt the alert, Please add the below factory into your code.
app.factory('AlertService', ['$rootScope', '$mdDialog', '$mdMedia',
function ($rootScope, $mdDialog, $mdMedia) {
var AlertService = {};
return {
onBeforeUnloadAlert: function(aData) {
var data = aData;
// Event Trigger when refreshing/Closing the page.
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compatable
myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = data.msgContent; // or a space
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
});
// Event Trigger when clicking browser Back or Forward buttons
$rootScope.$on('$locationChangeStart', function(e) {
// Appending dialog to document.body to cover sidenav in docs app
// Modal dialogs should fully cover application
// to prevent interaction outside of dialog
$mdDialog.show(
$mdDialog.alert()
//.parent(angular.element(document.querySelector('#popupContainer')))
.clickOutsideToClose(true)
.title(data.msgTitle)
.textContent(data.msgContent)
//.ariaLabel('Alert Dialog Demo')
.ok('Ok')
.targetEvent(e)
);
e.preventDefault();
});
}
};
return AlertService;
}
])
And, in Your_Angular_Controller, please add "
AlertService" on the controller parameter and include the below function it on each controller,
// Page/Stage changes alert
AlertService.onBeforeUnloadAlert({
msgTitle: 'Form Submission Alert',
msgContent: 'The Submission form not complete, please continue to submit the form or you may lose the information.'
});
