Ionic/Cordova menubutton event not called

Question

I am trying to monitor the Menu Button on Android (4.4.2 - Samsung S3), but the Ionic event (nor the underlying Cordova event) is not firing:

$ionicPlatform.on("menubutton", function () {
  // do our stuff here (never gets called)
});

Has anyone been able to make this work? Running Ionic platform 1.0.0, and all other events are firing as expected.

Answer 1

The docs are missing a line.

document.addEventListener("deviceready", function() {
    ...
    navigator.app.overrideButton("menubutton", true);  // <-- Add this line
    document.addEventListener("menubutton", yourCallbackFunction, false);
    ...
}, false);

https://issues.apache.org/jira/browse/CB-9949#comment-14989073

Answer 2

Try this: in the .run()

$ionicPlatform.ready(function() {
//...
     if (window.cordova) {
        $cordovaSplashscreen.hide();
        document.addEventListener("menubutton", myApp.onHardwareMenuKeyDown, false);
     }
/...

Then in the controller:

 $scope.onHardwareMenuKeyDown = function() {
    alert('menu button is working');
 }

Another way to do something:

angular.module('myApp', ['ngCordova', 'ionic', 'myApp.controllers'])
  .run(function($ionicPlatform, $rootScope, $state, $localstorage,$ionicSideMenuDelegate ) {

     $ionicPlatform.ready(function() {

      document.addEventListener("menubutton", onMenuKeyDown, false);

       function onMenuKeyDown() {
          console.log("some menu pops pup!! ");
          // here change the view , etc... 
          $rootScope.$apply();
        }

  });

})