Display warning in angularjs when user leaves page

Question

I am a new bee. I am trying to write a confirmation that warns the user when he tries to close the browser window.

I have 2 links on my page v1 and v2. When I click on the links that it takes to certain pages. Here is the code to redirect to v1 and v2

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/v1', {templateUrl: 'pages/v_1.html', controller: MyCtrl1}); $routeProvider.when('/v2', {templateUrl: 'pages/v_2.html', controller: MyCtrl2}); $routeProvider.otherwise({redirectTo: '/v1'}); }]); 

I want to display a message when the user clicks on v1 so that "he was going to leave v1 if he wants to continue" and when I click on v2. Any pointers on how to achieve this would be appreciated.

I got a response here , but it gives a message after every time interval.

Updated code

Controllers

 function MyCtrl1() { $scope.$on('$locationChangeStart', function (event, next, current) { if ('your condition') { event.preventDefault(); MessageService.showConfirmation( 'Are you sure?', MessageService.MessageOptions.YES_NO, { 'YES': function () { blockNavigation = false; $location.url($location.url(next).hash()); $rootScope.$apply(); }, 'NO': function () { MessageService.clear(); $log.log('NO Selected') } }); } }); } MyCtrl1.$inject = []; function MyCtrl2() {} MyCtrl2.$inject = []; 

Answer 1

The code for the confirmation dialog can be written shorter:

 $scope.$on('$locationChangeStart', function( event ) { var answer = confirm("Are you sure you want to leave this page?") if (!answer) { event.preventDefault(); } }); 

Answer 2

Lets split your question, you ask about two different things:

one.

I am trying to write a check that warns the user when he tries to close the browser window.

2.

I want to display a message when a user clicks on v1 that "he is about to leave v1 if he wants to continue" and when you press v2.

For the first question, do it like this:

 window.onbeforeunload = function (event) { var message = 'Sure you want to leave?'; if (typeof event == 'undefined') { event = window.event; } if (event) { event.returnValue = message; } return message; } 

And for the second question do this:

You must handle the $locationChangeStart event to connect to view the transition event, so use this code to handle the transition check in the / s controller:

 function MyCtrl1($scope) { $scope.$on('$locationChangeStart', function(event) { var answer = confirm("Are you sure you want to leave this page?") if (!answer) { event.preventDefault(); } }); } 

Answer 3

Here is the directive I'm using. It is automatically cleaned when the mold is unloaded. If you want to prevent the invitation from starting (for example, because you successfully saved the form), call $ scope.FORMNAME. $ SetPristine (), where FORMNAME is the name of the form you want to prevent from the prompt.

 .directive('dirtyTracking', [function () { return { restrict: 'A', link: function ($scope, $element, $attrs) { function isDirty() { var formObj = $scope[$element.attr('name')]; return formObj && formObj.$pristine === false; } function areYouSurePrompt() { if (isDirty()) { return 'You have unsaved changes. Are you sure you want to leave this page?'; } } window.addEventListener('beforeunload', areYouSurePrompt); $element.bind("$destroy", function () { window.removeEventListener('beforeunload', areYouSurePrompt); }); $scope.$on('$locationChangeStart', function (event) { var prompt = areYouSurePrompt(); if (!event.defaultPrevented && prompt && !confirm(prompt)) { event.preventDefault(); } }); } }; }]); 

Answer 4

As you discovered above, you can use a combination of window.onbeforeunload and $locationChangeStart to message the user. Alternatively, you can use ngForm.$dirty only to ngForm.$dirty user when they made changes.

I wrote an angularjs directive that you can apply to any form that will automatically track changes and tell the user if they reload the page or move. @see https://github.com/facultymatt/angular-unsavedChanges

I hope you find this directive useful!

Answer 5

Other examples here are great for older versions of ui-router (> = 0.3.x), but all state events like $stateChangeStart are deprecated from 1.0 . The new ui-router 1.0 code uses the $ hop service. Therefore, you need to insert $transitions in your component, and then use the $ transitions.onBefore method, as the code below shows.

 $ transitions.onBefore ({}, function (transition) {
   return confirm ("Are you sure you want to leave this page?");
 });

This is just a super simple example. The $transitions may accept more complex answers, such as promises. For more information, see the HookResult type .

Answer 6

 $scope.rtGo = function(){ $window.sessionStorage.removeItem('message'); $window.sessionStorage.removeItem('status'); } $scope.init = function () { $window.sessionStorage.removeItem('message'); $window.sessionStorage.removeItem('status'); }; 

Reload page: using init