Question

在我的代码中，当我触发ionicPopup时，按下按钮，它会触发另一个ionicPopup，但它应该关闭之前的ionicPopup。但是，在我的实现中，当它关闭最终的ionicPopup时，初始的ionicPopup并没有关闭，而是隐藏了导致应用程序冻结的内容。有没有办法确保所有ionicPopup都关闭或至少在按钮点击时关闭每个离子泵。这是我的代码markercluster

的代码

 $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>

这实际上是在第一个ionicPopup.show（{}）中打开的弹出窗口，第二个ionicPopup.show（{}）被关闭。不知道为什么第一个只被隐藏而不是关闭。

Answer 1

这是一个工作示例。我使用了Ionic docs中给出的示例以及您的代码：

    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

我一直在一个项目中工作，我需要显示一个弹出窗口，询问一些个人数据，然后从Facebook Connect插件调用facebookConnectPlugin.api（它有自己的凭据弹出窗口）

成功登录后，弹出窗口不可见，但弹出式容器仍然是DOM的一部分，弹出式打开类附加到正文。

我尝试了$ timeout方法没有成功（应用程序仍然至少从用户角度冻结）所以我想出了一些选项，如果其他人遇到这个问题就想分享。

1.-这不是一个好主意，但IMHO $ ionicPopup服务应该包括一种方法来强制删除整个事情，如果普通的close方法失败，这样的事情：在$ ionicPopup定义中

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

添加

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

通过调用方法remove（）

，您可以通过弹出窗口召唤破坏

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

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

ionicPopup不会仅关闭隐藏。

3 个答案: