How to catch 'modal.hidden' with multiple modal


#1

Now, I have two modal,modal A and modal B. I want to do something when modal A is hidden.
I can catch the modal.hidden event by the following code

$scope.$on('modal.hidden', function() {
      // do something
});

But the function is fired when modal A or modal B is hidden… How can I know that is modal A hide fired the function?


#2

Hi Fenglu,

You can try the below. Make sure you assign an id to each modal to make it easy.

$scope.$on('modal.hidden', function(event, modal) {
    console.log('Modal ' + modal.id + ' is hidden!');
});

Ionic event for when modal is closed by clicking outside
#3

Hi reddyshyam, thanks for your reply. You way didn’t work. There is no id property in modal object.
I have solved it by the following way.
Add a name property when the modal is create such as $scope.modal.name = 'modalA' .
then

$scope.$on('modal.hidden', function(event, modal) {
     if(modal.name === 'modalA') {
        // do something
     }
});

#4

Hi Fenglu,

Glad you got it working. You can assign ID when you are defining a modal. Please find an example below. Hope this helps.

$ionicModal.fromTemplateUrl('templates/yourmodal.html', {
    id: '1', // We need to use and ID to identify the modal that is firing the event!
    scope: $scope,
    animation: 'slide-in-up',
    backdropClickToClose : false
}).then(function(modal) {        
  $scope.taskModal1 = modal;
});

#5

hi reddyshyam, Yes, this is the perfect solution to solved this problem. Thanks for you help.


#6

You are welcome! :slight_smile: Have a good day!