Angular onbeforeunload, or, "are you sure you want to leave this page" confirm dialog

[dylans]

Our application has huge forms, and, we want to have a confirm dialog pop up if they try and (or accidently click away from) the page.

This is similar to the traditional $window.onbeforeunload, but we need it to also happen in the angular context (enter in a new url vs click a link within angular).

Here is my attempt, which does not work:  http://jsfiddle.net/5pycu/1/

Any insights on how to get this to work would be greatly appreciated!  Thanks!

[Peter Bacon Darwin]

Try this https://gist.github.com/2146120?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Peter Bacon Darwin]

Just to clarify, it is not really possible to "cancel" a route change at the moment: https://github.com/angular/angular.js/issues/592.

[Pawel Kozlowski]

On Tue, Dec 4, 2012 at 10:30 AM, Peter Bacon Darwin
<pe...@bacondarwin.com> wrote:
>
> Just to clarify, it is not really possible to "cancel" a route change at
> the moment: https://github.com/angular/angular.js/issues/592.

Hmm, I thought that this one was fixed, actually....
If not this would be one of the good things to discuss with the core
team, alongside with HTTP request interceptors and couple of other
things...
But they are not very responsive on this dev mailing list...

Cheers,
Pawel

[dylst]

Thanks gents.  I'm unable to get that example working unfortunately.

I noticed it uses $afterRouteChange, which I believe was renamed to $routeChangeSuccess?

Even after making that change, it doesn't seem to revert back to the last route correctly.

I'm assuming the "cancel"/request interceptor stuff would be a pretty popular piece of functionality, and I'd be happy to +1 where necessary.

Any thoughts on where to head from here would be much appreciated!

[Peter Bacon Darwin]

Perhaps you could decorate $location with a wrapper service that catches these url changes and reverts them if you want before they get to the $route service?

--

[dylst]

It seems like the answer was a lot easier than I thought, after digging around for it for quite a while.

I have the following two methods in my controller to confirm location/window change events away from the current location/page

    var leavingPageText = "You'll lose your changes if you leave";

    window.onbeforeunload = function(){

        return leavingPageText;

    }

    $scope.$on('$locationChangeStart', function(event, next, current) {

        if(!confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {

            event.preventDefault();

        }

    });

Peter, thanks for your help on this, much appreciated.

Thanks to Kai Groner for pointing it out in this thread:  https://groups.google.com/d/topic/angular/BY2ekZLbnIM/discussion

[Andreas Grünbacher]

Hi,

On Sunday, December 23, 2012 8:28:59 AM UTC+1, dylst wrote:

It seems like the answer was a lot easier than I thought, after digging around for it for quite a while.

I have the following two methods in my controller to confirm location/window change events away from the current location/page

    var leavingPageText = "You'll lose your changes if you leave";

    window.onbeforeunload = function(){

        return leavingPageText;

    }

Don't forget to clear window.onbeforeunload or else it may misfire when the user has already
navigated away from the view:

$scope.$on('$destroy', function() {
    window.onbeforeunload = undefined;
});

    $scope.$on('$locationChangeStart', function(event, next, current) {

        if(!confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {

            event.preventDefault();

        }

    });

Andreas

[Palanikumar M]

    $scope.$on('$locationChangeStart', function(event, next, current) {

        if(!confirm(leavingPageText + "\n\nAre you sure you want to leave this page?")) {

            event.preventDefault();

        }

    });

this is not working for me, any body help me pls