Handling the hardware back buttons

ionic-v1
#7

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
#8

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
#9

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

#10

Hmm, can you try this with beta 3?

#11

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.

#12

Yeah the list chagned in version 2

#13

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

Thanks for your help.

#14

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

#15

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

Thanks and good night!

#16

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
Android back button not detected
#17

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!

#18

Please provide codepen for the above functionality.

1 Like
#19

Thank you! It is working fine for me

#20

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
#21

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.

#22

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
#23

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

#24

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?

#25

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).

#26

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