I have a modal that opens a second modal and canno

Question

To start I created a codepen and I think the title says it all. I created a service to handle my modals, as 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
    }
  })

and it gets called in the controller like so

   ModalService.init('modal.html', $scope).then(function(modal) {
        ...do something....
        $ionicLoading.hide();
        modal.show();
      });

The issue it that I can only close one modal, the first one or the second, but if I go into the second I cannot close the second. Im assuming when I close one its destroying the modal instance for both? How can I work around this if I do not want to slit it into different controllers?

Answer 1

You assigned all the instances of modal controller returned by $ionicModal.fromTemplateUrl(...).then(modal) function to $scope.modal.

The second instance "overwrites" the first one, so when you close the 2nd and then try to hide the first one using the close button (ng-click="modal.hide()") $scope.modal still points to the 2nd...

So, in your Service you have to store modal controller individually for each instance of $ionicModal. Here is a possible edit to your code:

http://codepen.io/beaver71/pen/dGKBmv

Check also this post: How to create two ionic modal in a cordova app? or this one: Ionic Multiple Modals only last showing