0

在我的代码中，当我触发 ionicPopup 时，点击按钮后，它会触发另一个 ionicPopup，但它应该关闭前一个 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>

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

4

3 回答 3

2

这是一个工作示例。我使用了 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();然后执行里面的内容（在我们的例子中打开新的弹出窗口）。

于 2015-10-16T09:32:42.983 回答
0 
$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();
  }
});
于 2016-10-27T08:54:55.197 回答
0

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

成功登录后，popup 不可见，但popup-container仍然是 DOM 的一部分，并且popup-open类附加到 body。

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

1.- 这不是一个好主意，但恕我直言 $ionicPopup 服务应该包括一种在普通关闭方法失败时强制删除整个事物的方法，如下所示：在 $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();
  }
});
于 2016-09-27T19:40:29.547 回答