I am developing my first AngularJS Mobile App for Android with Cordova/PhoneGap. I have added below code inside my script file but I am unable to capture the backbutton event. Here is what I have in my scripts.js:
var app = angular.module('QFA', []);
app.controller('QFAinit', function( $scope, $window ) {
document.addEventListener("deviceready", onDeviceReady(), false);
function onDeviceReady() {
$window.alert("Device Ready-1");
document.addEventListener("backbutton", onBackKeyDown, false);
$window.alert("Device Ready-2");
function onBackKeyDown() {
$window.alert("Inside onBackKeyDown1");
}
}
});
And I am calling this as follows:
<body ng-controller="QFAinit">
When I run the App I do get "Device Ready-1" and "Device Ready-2" alerts. which means deviceready event is getting fired properly and an attempt on backbutton has also been made. However when I press backbutton nothing happens as desired and instead the default behavior is performed, i.e. the App exits.
On the other hand if I replace onBackKeyDown with onBackKeyDown() on eventlistener command then I get the "Inside onBackKeyDown1" alert when the App is loaded, just immediately after the above mentioned two alerts. But once the App is loaded then backbutton functionality is not there.
Can someone please advise how to make it work.
Many Thanks!
=============== Update =================
I have realized that I need to include cordova.js to trap backbutton!!! Once I add that, the back button does get trapped. However, as a result of that I get a broken App as shown below:
I have also tried changing versions of JQuery from 2.1 to 1.11, 1.10 and 1.4.5 but that doesn't have any impact. In fact even if I remove JQuery I still get the broken interface.
If I remind correctly, is the alert box on mobile devices asynchronous. It is possible that the app has not the time to show the alert box because it is already closing. If you do a console.log can you read it in Eclipse logcat? Or if you do a prevent default should it prevent from closing the app:
function onBackKeyDown(event) {
event.preventDefault();
$window.alert("Inside onBackKeyDown1");
}
Below is what finally worked for me, putting all this in section. Though it would work in Body as well. Not is Controller anymore.
<link rel="stylesheet" href="js/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap-theme.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady(), false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, true);
}
function onBackKeyDown() {
alert('Back Button Pressed');
resp = confirm("If you use Home key to exit, the App will remain active. Still want to Quit?");
if (resp === true) {
navigator.app.exitApp();
}
}
</script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>