如何防止离子模态隐藏
How to prevent Ionic modal from hidding
我捕获了 modal.hidden
事件,并对其进行了一些检查。当检查为 false
时,我想防止模态隐藏。我使用 e.preventDefault()
。但是没用。
我的代码 & CodePen:
$scope.$on('modal.hidden', function(event) {
var isPassed = false;
// do some check
if (isPassed == false) {
event.preventDefault();
}
});
您可以在设置模式时使用 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)
}
已更新 codepen here
我捕获了 modal.hidden
事件,并对其进行了一些检查。当检查为 false
时,我想防止模态隐藏。我使用 e.preventDefault()
。但是没用。
我的代码 & CodePen:
$scope.$on('modal.hidden', function(event) {
var isPassed = false;
// do some check
if (isPassed == false) {
event.preventDefault();
}
});
您可以在设置模式时使用 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)
}
已更新 codepen here