Intercepting all clicks with AngularJS to warn user of unsaved data

Question

I have a lengthy form customers will need to fill out. If they click a link on a page, it will navigate away from that Controller and they will lose any data they may have already input.

If I can determine the form has not yet been saved, how can I intercept any click to the links on the page so I can ask the user if they want to save their form first?

No code yet- sorry. Many thanks.

you can make a directive using "a" element ( `restrict: 'E'` ) and bind something on click — Utopik, Jun 27 '13 at 15:24
How about a directive that wires up `window.onunload()`? https://developer.mozilla.org/en-US/docs/Web/API/window.onunload — Mark Coleman, Jun 27 '13 at 15:43
There are answers out there... http://stackoverflow.com/questions/14893867/angular-js-directive-to-show-alert-for-browser-back-button-when-unsaved-data-in relies on watching location, and if it attempts to change do something. Another one: http://stackoverflow.com/questions/14852802/detect-unsaved-changes-and-alert-user-using-angularjs — Nix, Jun 27 '13 at 17:28
Thank you gentlemen- I should have done a more thorough search, but wasn't sure what kinds of terms to use. Those links are helpful. — Hairgami_Master, Jul 01 '13 at 13:38

score 0 · Answer 1 · answered Aug 22 '13 at 15:53

I've written an angularjs directive that you can apply to any form that will automatically watch for changes and message the user if they reload the page or navigate away. @see https://github.com/facultymatt/angular-unsavedChanges

Hopefully you find this directive useful!

score 0 · Answer 2 · answered Oct 20 '14 at 10:21

sorry for the late answer but mabye someone stumbles upon this and finds it useful. I have encountered the same problem and at the beginning i tryed to use the ng-dirty class applyed to the form element but because i had some custom controls the ng-bind won't be applyed when i changed some fields.

The best way i found so far is to detect when the model is changed with the use of $locationChangeStart event.

$scope.$on('$locationChangeStart', function (event, next, current) {
    //we are about to leave the page so it's time to see if the form was modified by the user
    if (!$scope.isFormClean())
    {
        event.preventDefault();
    }                    
});

Intercepting all clicks with AngularJS to warn user of unsaved data

2 Answers2