Closing modal With Android back button

ionic-v1
1

I thought back button on your Android device closing the modal
Now I notice that it does not work, have the option to close modal and possibly popup with the back button?

1 Like
2

Listen for the stateChangeStart and then destroy your Modal.

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
  $scope.modal.remove();
});
2 Likes
3

It not only closes the modal It also goes back to back :
Can do it globally for all the modal?

1 Like
4

i think what you want is event.preventDefault() if there is an open modal. This should keep the state transition from happening

5

I can do it globally for all the modals?

6

Hi I red that :
Warning: event.returnValue is deprecated

For my side I’d like to call a closing function with Android back button.
I’m having a button close in my view :

<button class="button button-block button-positive"  ng-click="hideThisModal()">Retour</button>

But I don’t understand how you apply the stateChangeStart I implemented this in my dedicated ModalController :

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
	console.log('$stateChangeStart');
	$scope.hideModal();
});
7

Ahhhm, in my apps the modals get closed on hitting the android hardware back button.

Which ionic version do you use?

8

Hi here is my version.
Yes the modal is hiding with the back Button of Android.
But what I’m looking for is a trick to execute a function on the back button click.

{
“version”: “1.0.0-beta.6”,
“codename”: “darmstadtium-dingo”,
“date”: “2014-05-21”,
“time”: “19:50:15”
}

9

I think the ionic modal closing aciton does not trigger a state change. It is an ionic thing.
You hit the back-button modal closes and that was it.

http://ionicframework.com/docs/api/service/$ionicModal/
The was sometime ago a documentation about modal-events (you can see them already in the code examples) like $on(‘modal.hide’…) but i can not get it work until…

If that would work you may hang into the event and everything would be fine.

10

I found a solution to my problem

document.addEventListener('backbutton', function(){
	if($('.modal-backdrop.active').length){
		$('.modal-backdrop.active').children().last().find('.backButtonForAndroid').trigger('click');
		return false;
	}else{
		window.history.back();
		return false;
	}
});
2 Likes
11

My solution was to catch the Android back button press in my controller:

function onHardwareBackButton(e) {
    //Call your modal / popup close method here
}

$ionicPlatform.registerBackButtonAction(onHardwareBackButton, 100);

That worked for me.

Good luck :smile:

Ed

12

Unfortunately, this disables the back button through the entire app.

13

Sorry but which android and ionic version do you have.

On my android devices >4.x the back button closes popups, modals… an its own (ionic standard).

If i overwrite the backbutton to go to the previous state, the backbutton still only closes the modal/popup (if one is open). if i hit the back button another time i get back to the previous state.

Everything is correctly working?

Greetz.

14

After updating to the latest version, the models are closed by pressing the back button :slight_smile:

15

Okay than i have a question to @mhartington.

Is there the possibility to build in an option for modals/popups to avoid closing them by hitting back button.

For example i built an e-commerce app with some notification in a popup. These popups shoul not closed by hitting the back button. But in other states it is the right behave to close the popups, because they are holding only some uninteresting details.

Greets and thanks to @kfir to post thats alrightyyyyyyyy!

1 Like
16

@bengtler then you would do something like this

    var deregister = $ionicPlatform.registerBackButtonAction(
                function () {
                    console.log("close the popup")
                }, 100
        );
        //Then when this scope is destroyed, remove the function
        $scope.$on('$destroy', deregister)

This will let you have some control over what back button does. The important part is the last line, which stops that action from propagating through the entire app.

17

We are using the $ionicTemplateLoader and it doesn’t close this template. Is that the difference?

Also, adding a dummy registerBackButtonAction like

function onHardwareBackButton(e) {
//Call your modal / popup close method here
}

$ionicPlatform.registerBackButtonAction(onHardwareBackButton, 100);

Completely disables the back button.

Android 4.4.2

18

@mhartington
I know that, but when i register my own backbutton behave the default behavior of closing modals/popups even works?
I am doin something like that:

$ionicPlatform.registerBackButtonAction(function () {
  if (blabla) {
    // exitaApp
  } else {
    // go back with own back functionality
  }
}, 100);
19

Thanks for the suggestion. Instead of playing around with the registerBackButtonAction, add the following to the my directive.

// Back button issue resolution
scope.$on(’$destroy’, function () {
console.log(“close the popup”);
…
$ionicBackdrop.release();
});

So, the back button works as normal (Android), but I can close the popup on $destroy.

1 Like
20

Awesome, glad you got it resolved.