Angular bootstrap modal events

Question

I'm trying to fire events for all UI modals that I have across the project, I want an event to fire when any UI modal opens or closes ?

Example:

anymodal.opened.then(function() {});

Can you elaborate on what exactly you are trying to achieve so members here can get an overall picture of the problem that you are trying to sole. — Simple-Solution
I'm trying trying to run code when any modal opens or closes, like watching any modal so i can run my code allover my application not for every modal instance alone ? — Ahmed Saber
you would like to open a single diaglog or more than one with single click? — Simple-Solution

svarog svarog · Accepted Answer · 2016-09-29T16:57:38

Taken from the docs (version 2.1.4)

The open method returns a modal instance, an object with the following properties:

close(result) (Type: function) - Can be used to close a modal, passing a result.

dismiss(reason) (Type: function) - Can be used to dismiss a modal, passing a reason.

result (Type: promise) - Is resolved when a modal is closed and rejected when a modal is dismissed.

opened (Type: promise) - Is resolved when a modal gets opened after downloading content's template and resolving all variables.

closed (Type: promise) - Is resolved when a modal is closed and the animation completes.

rendered (Type: promise) - Is resolved when a modal is rendered.

What you are looking for is the last three.

Use them as you would normally with a modal instance

var modalInstance = $uibModal.open({
    // define you modal here ...
});

modalInstance.result.then(function(selectedItem) {
    $ctrl.selected = selectedItem;
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });

modalInstance.opened.then(function() {
  console.log("modal opened");
}) 

modalInstance.closed.then(function() {
  console.log("modal closed");
})

modalInstance.rendered.then(function() {
  console.log("modal rendered");
})

Angular bootstrap modal events

1 Answers