ionicPopup不关闭只隐藏。

Question

在我的代码，当我触发ionicPopup，在按钮点击，它会触发另一ionicPopup但它应该关闭以前ionicPopup。然而，在我的实现，同时它关闭最后ionicPopup，初始ionicPopup犯规接近，而它隐藏这将导致应用程序冻结。有没有办法确保所有ionicPopups都是关闭的，或者至少它们会在按钮点击时关闭每个ionicpopup。这是我的代码codepen 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（{}）被关闭。不知道为什么第一个只隐藏而不是关闭。

Answer 1

下面是一个工作示例。我用离子文档与您的代码一起给出的例子：

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连接插件调用facebookConnectPlugin.api之前的一些个人资料被工作（这已经是凭据自带的弹出窗口）

后成功地登录弹出是不可见的，但弹出容器仍是DOM的一部分，弹出打开类是附着于身体。

我试过$超时方法没有成功（应用程序仍至少从用户的角度冻结），所以我有几个选择上前想分享，如果别人卡住这个问题得到。

1 .-这是不是一个好主意，但恕我直言$ ionicPopup服务应包括的方式强行删除整个事情，如果普通close方法失败，像这样：$ 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(); 
    } 
});