Overriding back button in android - Phonegap Angularjs

Question

I have following as my index.js (used to initialize phonegap)

 function onBackKeyDown() {
     angular.element('[ng-controller=NavCtrl]').scope().back();
 }


var app = {
// Application Constructor
     initialize: function() {
         this.bindEvents();
     },

     // Bind any events that are required on startup. Common events are:
     // 'load', 'deviceready', 'offline', and 'online'.
     bindEvents: function() {
        document.addEventListener('load', this.onLoad, false);
        document.addEventListener('deviceready', this.onDeviceReady, false);
        window.addEventListener("orientationchange", orientationChange, true);
     },
     onLoad: function() {

     },


    onDeviceReady: function() {
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
};

This should technically run the function onBackKeyDown when back button is pressed which it does. I can see the logs in logcat.

This as per the documentation should override the default behavior, but apparently when i click back button it not only fires the function but executes the default behavior as well. I am taken back to my login screen, whereas the behavior described is something else.

Please can anyone point me to the right direction, and let me know what I am not doing correct.

Answer 1

Not sure if it will do the trick but you could check if the onBackKeyDown function get an event as first parameter. If yes then try something like :

function onBackKeyDown(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  angular.element('[ng-controller=NavCtrl]').scope().back();
 }