Angular js directive to show alert for browser back button when unsaved data in form

Question

I\'m a newbie to angularjs.Is there any way to show alert when a form has unsaved data and user presses browser back button. Any pointers to how to achieve this would be app

Answer 1

As you've discovered, you can write a custom directive to watch for changes. Your updated code is on track, however there are a few things you could do to improve:

1. Your directive references the form by name, which limits it's re-usability. For example, what if you wanted to use this same directive on a form called myOtherForm? Currently using $scope.myForm.$dirty limits this flexibility. Instead, a better approach is to bind to the formController in your linking function.

2. There really isn't a need to watch $location.path() since binding to $locationChangeStart will do the same thing.

I've written an angularjs directive that you can uses the approaches I've discussed above. @see https://github.com/facultymatt/angular-unsavedChanges

Hopefully you find this directive informative. Feel free to learn from it or even use it in your project.