Multiple modals, how to close one specific modal?

1

The first modal

.modal.fade(id="modalDelete" my-modal)
    .modal-dialog.modal-sm
        .modal-content
          .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
            h4.modal-title {{ modalDeleteTitle }}
          .modal-body
            p {{ modalDeleteMessage }}
          .modal-footer
            button.btn.btn-default(type='button', data-dismiss='modal') Annuleren
            button.btn.btn-primary(type='button' data="{{ customerToDelete }}" ng-click="confirmDelete(customerToDelete)") Ja, verwijderen!

The second modal

  .modal.fade(id="modalPrintQr" my-modal)
    .modal-dialog.modal-sm
        .modal-content
          .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
            h4.modal-title Klantenkaart QR Code
          .modal-body(style="text-align:center;")
            qrcode(id="qrprint" class="myqrcode" data="{{ QRtoPrint }}" size="200")
          .modal-footer
            button.btn.btn-default(type='button', data-dismiss='modal') Annuleren
            button.btn.btn-primary(type='button' data="{{ customerToDelete }}" ng-click="confirmPrintQrCode()") Code afdrukken

$scope.confirmDelete = function(customer){
$scope.dismiss();
};

Closing the modal doesn’t work anymore after adding the second modal. I’m wondering how I can target a specific modal and dismiss() that?

2

I’ve created my own ModalManager ( service), which is responsible for opening and closing modals. It has stack, where I push modal controller after showing it and pop after closing. This way guarantees that all modals will be closed.

3

That sounds cool, do you have some code online to show how you have solved this? Or do you know of any way to close a specific modal, should be possible right?

4 
Module
.factory('ModalManager',function ($ionicModal, ProcessingService, Stack) {
    var stack = new Stack();
    return {
        Show: function (scope, template) {
            return $ionicModal.fromTemplateUrl(template, {scope: scope})
                .then(function (modalCtrl) {
                    stack.Push(modalCtrl);
                    return modalCtrl.show();
                })
                .catch(function (e) {
                    ProcessingService.Alert(e);
                });
        },
        Close: function() {
            if (!stack.IsEmpty()) {
                var modalCtrl = stack.Pop();
                modalCtrl.remove();
            }
        }
    }
});

It should be possible if modal has for example any id property then you could use Dictionary to store modals, I guess.

1 Like
5

Thanks, I’ll try your module this weekend. Maybe somebody has an idea how ionic itself can handle this without the need for an extra module?