Handling the hardware back buttons

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

You should add $ionicPopup in the run parameters of your app:

angular.module('app', ['ionic', ...])
    .run(function ($ionicPlatform, $ionicPopup,...)

it work for me,
thank u

Thank you all for your code samples and suggestions. I have now implemented my own back button routing in my app.

@imesky, try using native dialog with ngCordova.

E.g.

angular.module('myApp.UI', [])
    .factory('UI', ['$cordovaToast', '$cordovaDialogs',
        function ($cordovaToast, $cordovaDialogs) {
            var self = this;
            self.toast = function (message, duration, position) {
                var msg, dur, pos;
                msg = message || '';
                dur = duration || 'short';
                pos = position || 'bottom';
                return $cordovaToast.show(msg, dur, pos);
            };
            self.alert = function (title, msg) {
                return $cordovaDialogs.alert(msg, title, 'OK');
            };
            self.confirm = function (title, msg) {
                return $cordovaDialogs.confirm(msg, title, ['Yes', 'No']);
            };
            return self;
        }
    ]);

hi bengtler,
i am testing my app via ionicView in android device,
and i am trying exactly what you but its not working.
where do you put that code?
is there any additional requirement for handling the h/w event on ionic?
can you please help me?