Prevent ionic modal from hiding


#1

I catch modal.hidden event, and do some check on it .When the check is false, I want to prevent the modal from hiding. I use e.preventDefault(). But it doesn’t work.
my code:

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

my code in codepen


#2

Hi,
Unfortunately, you can’t prevent hiding the modal with capturing event ‘modal.hidden’ since the modal is already hidden and the event is just a notification saying the the modal is now hidden.
You can use another approach and control when the modal will be closed, by controlling when the method modal.hide() will be called.
Basically, you have to do 3 things:

  1. When calling $ionicModal.fromTemplateUrl, set the properties backdropClickToClose and hardwareBackButtonClose to false
  2. On back button click use you own: $scope.hideModal where you will check if isPassed is true or false.
  3. Register your own back function to handle hardware back button, with: registerBackButtonAction. Take a look at: http://ionicframework.com/docs/api/service/$ionicPlatform/

I’ve created a codepen that shows 1. and 2.:


#3

@bokboki2002 Thanks for you reply. Your answer has solved my problem.


#4

Thank you, you have shared a great information. I was having the same problem and this helps me

If you want any help in writing stuff you can contact custom dissertation writing service