页面休假前的Angularjs确认消息

Question

I have started with Angularjs and creating a small application. In this application I am showing a form to user on a page. I want to show confirmation message to user before leaving a page or refreshing the page. I am using the below code for this purpose-

$scope.$on('$locationChangeStart', function(event, next, current) {    
    if(!confirm("The form is dirty, do you want to stay on the page?")) {
        event.preventDefault();
    }
});

When I used this code then it is working fine but it throws an error in console panel. Error is "Error: $digest already in progress".

When I search solution for this issue then found some suggestion to use $timeout. So, I used it in my code as like below-

$scope.$on('$locationChangeStart', function(event, next, current) {    
  $timeout( function() { 
    if(!confirm("The form is dirty, do you want to stay on the page?")) {
        event.preventDefault();
    }
  });
});

When I used $timeout then error gets disappear but page gets leave before confirmation message.

Does any one has some idea about it ?

Answer 1

you may use

$timeout(fn{}, delay);

from angular js documentation the timeout method takes the argument like this.

$timeout([fn], [delay], [invokeApply], [Pass]);

so you can use a timeout value. i think this should work.

Answer 2

Try modifying your code listen for this event on the $rootScope, not the local $scope.

Ex:

$rootScope.$on('$locationChangeStart', function(event, next, current) {    
    if(!confirm("The form is dirty, do you want to stay on the page?")) {
        event.preventDefault();
    }
});