Prompt user on navigation if there are unsaved form changes. Works with ngRoute and ui.outer.
Here (using ngRoute) or here (using ui.router).
from npm
npm install --save angular-dirtyform-check
from bower
bower install --save angular-dirtyform-check
and add it to your html file
<script src="/dist/angular-dirtyform-check.js"></script>
Add angular-dirtyform-check
as dependency
var module = angular.module('yourApp', [
'angularDirtyformCheck'
]);
and make any <form>
being watched for unsaved changes on navigation by adding the dirty-check
directive
<form dirty-check class="well">
<div class="form-group">
<label for="magicnumber">Magic number</label>
<input type="number" class="form-control" id="magicnumber" placeholder="Magic number" ng-model="model.magicnumber">
</div>
<a class="btn btn-default" href="#form1/testParam">Go to form 1 with params</a>
</form>
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(config);
config.$inject = ['dirtyCheckServiceProvider'];
function config(dirtyCheckServiceProvider) {
dirtyCheckServiceProvider.setDirtyMessage('Wanna leave?');
}
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('yourApp', [
'angularDirtyformCheck',
'ngDialog'
]);
module.service('dirtyCheckDialog', dirtyCheckDialog);
dirtyCheckDialog.$inject = ['ngDialog'];
function dirtyCheckDialog(ngDialog) {
return {
show: function () {
return ngDialog.openConfirm({
template: 'dialog.tpl.html'
});
}
};
}
or $mdDialog from Angular Material ($mdDialog.show()
returns a promise)
var module = angular.module('yourApp', [
'angularDirtyformCheck',
'ngMaterial'
]);
module.service('dirtyCheckDialog', dirtyCheckDialog);
dirtyCheckDialog.$inject = ['$mdDialog'];
function dirtyCheckDialog($mdDialog) {
return {
show: function () {
return $mdDialog.show({
templateUrl: 'dialog.tpl.html',
controller: ['$scope', '$mdDialog', function($scope, $mdDialog) {
$scope.stay = function () {
$mdDialog.cancel();
};
$scope.leave = function () {
$mdDialog.hide();
};
}]
});
}
};
}
Get a clone and run
npm install
gulp build
The built file is located under ./dist
.
To run the demo locally run
gulp ngRoute-demo | gulp ui.router-demo
and navigate your browser to http://localhost:8080/dev_index.html
. Source changes will trigger a refresh.