ionic-framework - 如何防止 ionic 模态隐藏

Question

我捕获了 modal.hidden 事件，并对其进行了一些检查。当检查为 false 时，我想防止模态隐藏。我使用 e.preventDefault()。但它不起作用。

我的代码 & CodePen :

$scope.$on('modal.hidden', function(event) {
    var isPassed = false;
    // do some check
    if (isPassed == false) {
        event.preventDefault();
    }  
});

Answer 1

您可以在设置模式时使用 backdropClickToClose 和 hardwareBackButtonClose 选项并隐藏后退按钮。这将防止模式被关闭:

// Load the modal from the given template URL
$scope.modal = {};
$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up',
    backdropClickToClose: false,
    hardwareBackButtonClose: false
}).then(function(modal) {
    $scope.modal = modal;
});

然后您可以进行一些检查并将这些值再次设置为 true，同时显示后退按钮。这仍然是用户友好的，用户可以以适当的方式关闭模式。

function checkSomething(){
    // The timeout is only to demonstrate, do your check here
    $timeout(function(){
      console.log("Now user can close modal")
      $scope.isPassed = true;
      $scope.modal.backdropClickToClose = true;
      $scope.modal.hardwareBackButtonClose = true;
    }, 3000)
}

更新代码笔 here