Handling the hardware back buttons

I do not know if it is possible with only some code snippets.
But i can try to describe it a little bit more in detail.

I have an anuglarjs app built up with ionic and requirejs.
My angularjs routings are done with ui-router and $stateProvider.
In the app i navigate over $location.path(path) and back with $window.history.go(-steps).

After I bootstrap my angular app I hang in some event listeners - something like that:

document.addEventListener('deviceready', function () {
  document.addEventListener('backbutton', function (event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('hey yaaahh');
  }, false);
}, false);

If i tap on the android backbutton, i get my console log, but the app will be closed anyway.

Thank you!

Bye.

2 Likes

You should try to this ionic function

 $ionicPlatform.onHardwareBackButton(function() {
     event.preventDefault();
     event.stopPropagation();
     alert('going back now y'all');
  });

This is specifically made for android hardware buttons

http://ionicframework.com/docs/api/service/$ionicPlatform/

3 Likes

Sadly, but true -> it produces the same behaviour. :frowning:

Hmm, can you try this with beta 3?

Wuaahh, with the new Beta my app gets broken.

Some strange angularjs errors, that some of my directives needs ionList…

Maybe the ionList changes in that version?

Greets.

Yeah the list chagned in version 2

I’ve updated to 1.0.0 Beta 3 but it does not change anything.

Thanks for your help.

Let me throw something together and see whats happening. I’ll report back in an hour or so

Okay here it is late at night, so i will check your post tomorrow ;).

Thanks and good night!

I fixed it:

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonAction allows you to completly overwrite back button behavior.
First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).

7 Likes

The above didn’t work for me but turns out I didn’t fully update my apps markup when updating Ionic version.

I was still using <div ui-view></div> with <nav-page> once I changed them to <ion-nav-view> and <ion-view> everything works again!

Please provide codepen for the above functionality.

1 Like

Thank you! It is working fine for me

Thanks, registerBackButtonAction works, but it catches ALL back button actions,not only the controller I put the code in.
I want only one specific view to have a different behaviour (close the app on Back).
How can I keep default Back action on other views while having a special action on one view?

Edit (found):

  // Disable BACK button on home
  $ionicPlatform.registerBackButtonAction(function (event) {
    if($state.current.name=="app.home"){
      navigator.app.exitApp();
    }
    else {
      navigator.app.backHistory();
    }
  }, 100);
11 Likes

This is really cool, how could I use it to control a side menu. When the hardware back button is pressed - open/toggle the side menu?

$ionicPlatform.registerBackButtonAction(function () {
    $ionicSideMenuDelegate.toggleLeft();
}, 100);

The code above disables the back button but dosen’t toggle the side menu, I am runnin this inside the .run function inside app.js.

Hello all ,

I am using this

$ionicPlatform.registerBackButtonAction(function () {
    $ionicSideMenuDelegate.toggleLeft();
}, 100);

to override the back button but it still looks for previous views to go !
it does get called but it doesnt override the Back Button
What could be wrong ?
Can anyone help ?

1 Like

If you end up overwriting this a lot, it get’s really clunky. Here’s a simple angular service I wrote that allows you to easily attach back button behavior to specific app states:

https://gist.github.com/kyletns/93a510465e433c1981e1

I was searching for a similar solution and seems like I finally found it. I have slightly out of context question. Where can I find documentation for “navigator.app” is it core feature of ionic? cordova? or some plugin?

There is no documentation on navigator.app for cordova, and that is on purpose.
It contains APIs and behaviour that are specific to certain platforms, and can’t/won’t be normalized accross other platforms (such as navigator.app.exitApp()).
Although I haven’t seen word on it from the core developers, I wouldn’t even count on it to be there everytime: it may not exist on the next version of cordova at all.

According to the source code, only android and amazon-fireos have that object augmented (augmentations available here for android and here for amazon-fireos).

hi sir,
i ve used this code and back button functionality works perfectly

but the popup menu wont come up if i added the “$ionicPopup.confirm” part
this is what i’ve done till now for h/w button.

$ionicPlatform.registerBackButtonAction(function (event) {
    if($state.current.name=="page1"){
	
	
	var confirmPopup = $ionicPopup.confirm({
       title: 'Consume Ice Cream',
       template: 'Are you sure you want to eat this ice cream?'
     });
     confirmPopup.then(function(res) {
       if(res) {
      navigator.app.exitApp();
       } else {
         console.log('You are not sure');
       }
     });   };
    }
else 
{ 
     navigator.app.backHistory();
    }
  }, 100);

plese help me in this case as popup functionality does not work :’(

1 Like