How to listen Android hardware back button in ioni

Question

I try to listen android hardware back button,but it is no effect.

main code:

.run(['$ionicPlatform','$ionicHistory',function($ionicPlatform,$ionicHistory) {
     $ionicPlatform.ready(function() {
                          if(window.cordova && window.cordova.plugins.Keyboard) {
                          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                          }
                          if(window.StatusBar) {
                          StatusBar.styleDefault();
                          }
                          });
     $ionicPlatform.registerBackButtonAction(function (e) {
         e.preventDefault();
         $ionicHistory.nextViewOptions({
             disableAnimate: true
        });
        $ionicHistory.viewHistory().backView.go();
         return false;
       }, 100);
     }])

My running environment is mobile browser.Android version 4.4.2

Answer 1

UPDATE: I'm no longer using this as it was unreliable. Additionally, in the latest Ionic release, app.ts is now app.component.ts.

For Ionic 2, check out my blog post on how to fix this. Should also work for Ionic 1, as it's only calling a cordova listener:

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

and here's the actual post info:

In your app.ts, do the following to get the back button working as expected (mostly!):

  initializeApp() {
    this.platform.ready().then(() => {
      this.registerBackButtonListener();
    });
  }

  registerBackButtonListener() {
    document.addEventListener('backbutton', () => {
      var nav = this.getNav();
      if (nav.canGoBack()) {
        nav.pop();
      }
      else {
        this.confirmExitApp(nav);
      }
    });
  }


confirmExitApp(nav) {
    let confirm = Alert.create({
      title: 'Confirm Exit',
      message: 'Really exit app?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Disagree clicked');
          }
        },
        {
          text: 'Exit',
          handler: () => {
            navigator.app.exitApp();
          }
        }
      ]
    });
    nav.present(confirm);
  }

  getNav() {
    return this.app.getComponent('nav');
  }

Note:

If you get errors about app not being a property of navigator:

1) Add a typings folder to your app root: e.g. app/typings

2) Add a file called: pluginshackyhacky.d.ts

3) Add for properties you need extended for TypeScript to compile.:

interface /*PhoneGapNavigator extends*/ Navigator {
    app: any;
}

4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:

  "files": [
    "app/app.ts",
    "app/typings/pluginshackyhacky.d.ts",
    "app/typings/phonegap.d.ts"
  ]

You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.

Hope this helps anyone having this problem.

Cheers.

Answer 2

may be this could help you.

 $state.$current.name == "";var backbutton=0;
 $ionicPlatform.registerBackButtonAction(function (event) {

    if (($state.$current.name == "app.intro") ||
        ($state.$current.name == "app.main.home") ||
        ($state.$current.name == "app.account")) {
        if(backbutton==0){
            backbutton++;
            window.plugins.toast.showLongBottom('Press again to exit');
            $timeout(function(){backbutton=0;},3000);
        }else{
            navigator.app.exitApp();
             }
        console.log("one");
    }else if($state.$current.name == "app.welcome.takeControl") {
        console.log("two");
            $state.go("app.main.home");
    }else{
        console.log("three");
            navigator.app.backHistory();
          }
}, 100);