ionicPopup doesnt close only hides.

Question

In my code, when I trigger the ionicPopup, upon button tap, it triggers another ionicPopup but it should close the previous ionicPopup. However, in my implementation, while it close the final ionicPopup, the initial ionicPopup doesnt close rather it hides which causes the app to freeze. Is there a way to make sure that all ionicPopups are closed or at least that they close each ionicpopup upon button tap. This is a codepen of my code http://codepen.io/anon/pen/dYVdJv

 $scope.showPopup = function() {
   $scope.data = {}

    $ionicPopup.show({
      title: ' Session Terminated!',
      scope: $scope,
      template:' You are currently logged into another device/browser. Pls log out from your other device/browser!',
      buttons: [
        { text: '<h6 style="text-transform: capitalize;">Cancel</h6>',
          type: 'button-positive'
        },
        {  
          text: '<h6 style="text-transform: capitalize;">Verify Me</h6>',
          type: 'button-positive',
          onTap: function(e) {
            $scope.verifyMe();
          }
        }
      ]  
    }).then(function(res) {
      console.log('Tapped!', res);
    }, function(err) {
      console.log('Err:', err);
    }, function(popup) {
      console.log('Got popup', popup);
      $timeout(function() {
        popup.close();
      }, 1000);
    });
  }; 

  $scope.verifyMe = function() {
    $ionicPopup.show({
      title: ' Enter Username',
      scope: $scope,
      template:'<input type="text" ng-model="user.username">',
      buttons: [
        {  
          text: '<h5 style="text-transform: capitalize;">Verify Me</h5>',
          type: 'button-positive',
          onTap: function(e) {
            $scope.verifyNow('first.app');
          }
        }
      ]  
    }).then(function(res) {
      console.log('Tapped!', res);
    }, function(err) {
      console.log('Err:', err);
    }, function(popup) {
      console.log('Got popup', popup);
      $timeout(function() {
        popup.close();
      }, 1000);
    });
  };

  $scope.verifyNow = function(username)   {
    console.log("verified and removed" + username)
  }

once execution of code is complete, i get this when i check my code

<div class="popup-container popup-showing popup-hidden" ng-class="cssClass">
  //more code here
</div>

this is actually the popup opened in the first ionicPopup.show({}), the second ionicPopup.show({}) gets closed. Dont know why the first one only gets hidden instead of closed.

Answer 1

$ionicPlatform.on("pause", function () {

  $ionicBody.removeClass('popup-open');
  var popup = angular.element(document.getElementsByClassName('popup-container'));
  if (popup) {
    var backdrop = angular.element(document.getElementsByClassName('backdrop'));
    if (backdrop) {
      backdrop.remove();
    }
    popup.remove();
  }


  $ionicBody.removeClass('modal-open');
  var modal = angular.element(document.getElementsByClassName('modal-wrapper'));
  if (modal) {
    var modalBackdrop = angular.element(document.getElementsByClassName('modal-backdrop'));
    if (modalBackdrop) {
      modalBackdrop.remove();
    }
    modal.remove();
  }
});

Answer 2

I've been working in a project where I need to show a popup asking some personal data before call facebookConnectPlugin.api from Facebook Connect plugin (which has is own popup for credentials)

After succesfully login the popup is not visible, but popup-container is still part of the DOM and popup-open class is attach to the body.

I tried $timeout approach without success (app still freeze at least from a user perspective) so I came up with a few options want to share if someone else get stuck with this issue.

1.- This is not a good idea, but IMHO $ionicPopup service should include a way to remove the whole thing by force if ordinary close method fail, something like this: within $ionicPopup definition

IonicModule.factory('$ionicPopup', [...]

Add

popup.responseDeferred.promise.remove = function popupRemove(result) {
  popup.element.remove.();
};

That give you the power to summon the destruction over your popup by calling method remove()

2.- What I actually did is manually remove popup-class and then get rid of the whole popup tree attach to the document before leave the view.

$scope.$on("$ionicView.beforeLeave", function(event, data){
  $ionicBody.removeClass('popup-open');
  var popup = angular.element(document.getElementsByClassName('popup-container'));
  if(popup){
    popup.remove();
  }
});

Answer 3

Here is an working example. I used the example given in Ionic docs along with your code:

    var myPopup = $ionicPopup.show({
      title: ' Enter Username',
      scope: $scope,
      template: '<input type="text" ng-model="user.username">',
      buttons: [{
        text: '<h5 style="text-transform: capitalize;">Verify Me</h5>',
        type: 'button-positive',
        onTap: function(e) {


          myPopup.close();
          return console.log("verified and removed");
        }
      }]
    });

  };
  // A confirm dialog
  $scope.showConfirm = function() {
    var confirmPopup = $ionicPopup.confirm({
      title: ' Session Terminated!',
      scope: $scope,
      template: ' You are currently logged into another device/browser. Pls log out from your other device/browser!',
      buttons: [{
        text: '<h6 style="text-transform: capitalize;">Cancel</h6>',
        type: 'button-positive'
      }, {
        text: '<h6 style="text-transform: capitalize;">Verify Me</h6>',
        type: 'button-positive',
        onTap: function(e) {
          confirmPopup.close();

          $timeout(function() {
            $scope.showPopup();
          });

        }
      }]
    });
    confirmPopup.then(function(res) {
      if (res) {
        console.log('You are sure');
      } else {
        console.log('You are not sure');
      }
    });
  };

  // An alert dialog
  $scope.showAlert = function() {
    var alertPopup = $ionicPopup.alert({
      title: 'Don\'t eat that!',
      template: 'It might taste good'
    });
    alertPopup.then(function(res) {
      console.log(
        'Thank you for not eating my delicious ice cream cone');
    });
  };

Notice

 $timeout(function() {
            //code
          });

that actually waiting for the confirmPopup.close(); and then executes what is inside (in our case opening new popup).