We are using the mdDalog service to pop up a modal form the allow the user to view and edit data. We have a close button where we validate the data has been saved and if not, give the user the option to discard changes or return to editing. If they discard changes, we simply call close() on $mdDialog. We now want to allow ESC key and/or clicking outside the modal to close the modal. We can call the validation code but there does not seem to be a way in onRemoving to cancel the action. The code is as follows
$mdDialog.show({
template: activityTemplate,
escapeToClose: true,
clickOutsideToClose: true,
fullscreen: false,
controller: 'activityController',
controllerAs: '$ctrl',
onRemoving: function(element, removePromise) {
// call validation function on parent controller
// cancel close if data is not valid
console.log(element);
console.log(removePromise);
$mdDialog.cancel();
},
locals: {
activity: activity.data,
comments: comments.data
}
}).then((goTo) => {
if (goTo) {
$state.go(goTo.route, goTo.params);
} else {
$state.go('^');
}
return goTo;
}, () => {}).finally(() => {});
Are there other events we could hook or another undocumented way to conditionally cancel the close event? I could always set escapeToClose and clickOutsideToClose back to false and listen to keypress and click events when the dialog is showing, but I would expect there to be a better way.
Thanks in advance.
Looking forward to migrating to the new Angular!