I created a service to handle modals, however when

Question

Let me prefix by saying this a very similar to my other question seen here where I could not close any nested modals. The issue was from my service creating the same instance of a modal where 'The second instance "overwrites" the first one', so my solution was to create separate instances using $scope.modalA = modal; and $scope.modalB = modal; and I could still use my service to handle modals, seen here:

.service('ModalService', function ($ionicModal, $ionicLoading, $rootScope) {
    var init = function (tpl, $scope) {
        $ionicLoading.show({
            content : 'Loading',
            animation : 'fade-in',
            showBackdrop : true,
            maxWidth : 200,
            showDelay : 0
        });

        var promise;
        $scope = $scope || $rootScope.$new();
        promise = $ionicModal.fromTemplateUrl(tpl, {
                scope : $scope,
                animation : 'slide-in-up'
            }).then(function (modal) {
                $scope.modal = modal;
                return modal;
            });
        $scope.$on('$destroy', function () {
            $scope.modal.remove();
        });
        return promise;
    }
    return {
        init : init
    }
})

Now, I have a similar issue when using third party libraries where, as in this case, instead of not being able to close the nested modal, the third party libraries are unresponsive only when in my nested modal states. In other words when any third party modals are used like seen here

It is only my modal (the one in the background with activity 1 & 2) that is responsive to clicks. As I said I created the two instances $scope.modalA = modal; and $scope.modalB = modal;. to handle nested modal states however Im unaware how to handle this when using libraries. I would love some help on this, heres my codepen http://codepen.io/garrettmac/pen/NxmowX

Answer 1

And why not using simply the $ionicPopup?

You can customize the popUp with your template using the option templateUrl:

  var confirmPopup = $ionicPopup.confirm({
    title: 'I cannot click yes or canel!',
    templateUrl: 'popUp.html',
    buttons: [{ // Array[Object] (optional). Buttons to place in the popup footer.
      text: 'Cancel',
      type: 'button-default',
      onTap: function(e) {
        return "CANCEL";
      }
    }, {
      text: 'OK',
      type: 'button-positive',
      onTap: function(e) {
        // Returning a value will cause the promise to resolve with the given value.
        return "OK";
      }
    }]
  });

  confirmPopup.then(function(res) {
    if (res) {
      console.log("popup - response: "+res);
    } else {
      console.log('popup close');
    }
  });

I've modified your CodePen: http://codepen.io/beaver71/pen/jWRJxg

Answer 2

There seems to be a bug in ionic versions 1.0.0-1.2.4 where any third party popups or modals you use that sit inside a nested ionic modal will be unresponsive. As Ionic is now working on Ionic V2 there will likley not be a fix for this. Instead I found a workaround. I just open and close a hidden modal before any third party modals or popups are used like so with an empty html page`

$ionicModal.fromTemplateUrl('workaround-modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.workaroundModal = modal;
  $scope.workaroundModal.show();
  $scope.workaroundModal.hide();
});
  `

also seen at http://codepen.io/garrettmac/pen/adrJbw. I hope this helps someone.