I'm having issues disabling the back button for Android in a Phonegap project using Ionic Framework / Angular JS. I have tried many other proposed solutions to no avail. The problem is I have a 'Login' screen which is a modal (ionicModal), but Android users are able to use the back button to navigate away regardless of if they are logged in or not.
I tried disabling the Android Back button all together. The event fires, but the page navigation still happens. I feel like if this worked, this would be the ideal and most straight forward solution. Here though, preventDefault() and stopPropagation() seem to have no effect.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown(e) {
alert('back button triggered');
e.preventDefault();
e.stopPropagation();
}
I also tried disabling the navigation from within Angular by listening to $locationChangeStart and preventing that:
// Disable "Back" button on androids if user is on login screen
$rootScope.$on('$locationChangeStart', function(e) {
if( true ) {
e.preventDefault();
e.stopPropagation();
}
});
This also seems to work, but yet somehow still does not prevent Android from hiding the modal and going to the previous screen.
Is there a proper way to disable the Android Back button when using Phonegap/Ionic/Angular? It uses the Angular UI router, and the modal is not a route but rather an ionicModal.