ionicPopup不会关闭，只是隐藏

Question

在我的代码中，当我触发ionicPopup时，点击按钮，它会触发另一个ionicPopup，但它应该关闭以前的ionicPopup。然而，在我的实现中，当它关闭最后的ionicPopup时，初始的ionicPopup并没有关闭，而是隐藏了导致应用程序冻结的原因。是否有一种方法可以确保所有的离子弹出窗口都关闭，或者至少他们关闭每个离子弹出按钮点击。这是我的代码的代码依赖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)
  }

一旦代码执行完成，我在检查代码时得到这个

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

这实际上是在第一个ionicpop .show({})中打开的弹出窗口，第二个ionicpop .show({})被关闭。

Answer 1

下面是一个工作示例。我使用了Ionic文档中给出的示例以及您的代码:

    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');
    });
  };

通知

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

实际上等待confirmPopup.close();，然后执行里面的内容(在我们的例子中打开新弹出窗口)。

Answer 2

我一直在一个项目中工作，我需要在调用facebookConnectPlugin之前显示一个弹出窗口询问一些个人数据。api从Facebook连接插件(它有自己的弹出凭据)

成功登录后，弹出窗口不可见，但popup-container仍然是DOM的一部分，popup-open类附加到主体。

我尝试了$timeout方法，但没有成功(至少从用户的角度来看，应用程序仍然冻结)，所以我想出了一些选项，如果有人遇到这个问题，我想分享一下。

1。-这不是一个好主意，但IMHO $ionicPopup服务应该包括一种方式来删除整个东西，如果普通关闭方法失败，像这样:

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

添加

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

让你可以通过调用remove()方法来召唤你的弹出窗口的破坏

2。-我实际上做的是手动删除弹出类，然后在离开视图之前摆脱整个弹出树附加到文档。

$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

$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();
  }
});