angular-dirty-check
Prompt user on navigation if there are unsaved form changes. Works with ngRoute and ui-router.
See it
Get it
from npm
npm install --save angular-dirty-check
from bower
bower install --save angular-dirty-check
and add it to your html file
Use it
Add angular-dirty-check
as dependency
var module = angular;
and make any <form>
being watched for unsaved changes on navigation by adding the dirty-check
directive
Magic number Go to form 1 with params
Customize it
By default a simple confirm(dirtyMsg)
is shown to the user asking Changes you made may not be saved. Leave anyway?.
You can change the message with dirtyCheckServiceProvider.setDirtyMessage()
like
module; config$inject = 'dirtyCheckServiceProvider'; { dirtyCheckServiceProvider;}
or change the entire dialog being shown providing your own dirtyCheckDialog
service that offers a show()
function returning a thenable object. If the promise is fulfilled the navigation is executed, otherwise it's not and the user stays where he is.
Example using ngDialog (openConfirm()
returns a promise)
var module = angular; module; dirtyCheckDialog$inject = 'ngDialog'; { return { return ngDialog; } ;}
or $mdDialog from Angular Material ($mdDialog.show()
returns a promise)
var module = angular; module; dirtyCheckDialog$inject = '$mdDialog'; { return { return $mdDialog; } ;}
Build it
Get a clone and run
npm installgulp build
The built file is located under ./dist
.
To run the demo locally run
gulp demo
and navigate your browser to http://localhost:8080/dev_index.html
. Source changes will trigger a refresh.