CODEWITHSUNDEEP
androidangularjsionic-framework
woshikange
woshikange

Reputation: 25

How to listen Android hardware back button in ionic

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

Upvotes: 1

Views: 1402

Answers (2)

Dave
Dave

Reputation: 5416

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.

Upvotes: 3

the_mahasagar
the_mahasagar

Reputation: 1201

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

Upvotes: 1

Related Questions