Reputation: 1627
I am using Angular UI Bootstrap modal (ui.bootstrap.dialog) and I have backdrop: true & backdropClick: true.
But when user clicks away from the modal, I want to perform not only close but additional functions.
I was looking at the source code thinking I could overwrite Dialog.prototype._bindEvents but have not had any luck doing it.
I also think this might be 'hidden' event in original bootstrap modal, but I was not able to catch this event.
Is there a way to do define a function to execute on backdrop click, and how would one go about it.
Thanks --MB
Upvotes: 3
Views: 10295
Reputation: 304
I know this is an old question, but since I got here and found a solution later...
You can watch the 'modal.closing' event, broadcasted to the modal's scope, like this:
.controller('modalCtrl', function($scope, $modalInstance) {
$scope.$on('modal.closing', function(event, reason, closed) {
console.log('reason: ', reason);
});
})
The second parameter is the reason (whatever is passed to the $close() method). The reason when clicking the backdrop is backdrop click
Here a working plunker
Upvotes: 3
Reputation: 15486
You can use
backdrop: 'static'
in your options. Like this:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
backdrop: 'static',
...
});
Upvotes: 1
Reputation: 4471
You can watch the scope destory event in the modal:
$scope.$on('$destroy', function () {});
Or resolve the dismiss promise in your modal and chain up a new one passed through DI.
When creating the modal inject a defer object (never the promise):
var close = $q.defer();
var modalInstance = $modal.open({
...
closePromise: function () {
return close;
}
});
close.promise.then(function ( someData ) {
// On every modal close
});
And in the modal:
// resolve dismiss
$modalInstance.result.then(angular.noop, function () {
closePromise.resolve( someData );
});
Upvotes: 1
Reputation: 18339
The dialog class is being rewritten right now, but for a quick and dirty you can modify the options object to receive a function to be called on close and in the close prototype, call that function if it isn't null:
Note the closeFn
var defaults = {
backdrop: true,
dialogClass: 'modal',
backdropClass: 'modal-backdrop',
transitionClass: 'fade',
triggerClass: 'in',
resolve:{},
closeFn:null, // added with null default
backdropFade: false,
dialogFade:false,
keyboard: true, // close with esc key
backdropClick: true // only in conjunction with backdrop=true
/* other options: template, templateUrl, controller */
};
In the close prototype:
if (self.options.closeFn!==null) {
self.options.closeFn();
}
Controller:
function doSomething() {
alert('something');
}
$scope.opts = {
backdrop: true,
keyboard: true,
backdropClick: true,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController',
closeFn: doSomething
};
I mocked this up here: http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview
Upvotes: 1