Hi,
I ran into a little problem while using the onsen dialog in my app.
I use the android backbutton in order to navigate back in my app, and when I’m on the home page, a back button click would show a prompt for the user, whether they want to close the app or not.
To get this working, I had to override the default back button behaviour, and I found some tutorials for that. That works nicely.
However, I just noticed that even though my ons-dialogs are specified as cancelable, i am not able to use the backbutton to close / hide them.
Here’s my index.js script where I have my backbutton handler:
myApp.run(['$rootScope', function($rootScope) {
document.addEventListener('deviceready', function() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
ons.disableDeviceBackButtonHandler();
document.addEventListener("backbutton", onBackKeyDown, false);
}, false);
}]);
var AlreadyFiredBackButton = false;
function onBackKeyDown(e) {
try {
if(AlreadyFiredBackButton == false) {
AlreadyFiredBackButton = true;
if(myNavigator.topPage.name=="home.html") {
ons.notification.confirm({
message: 'Are you sure you want to close?',
title: 'Close app',
buttonLabels: ['Yes','No'],
callback: function(idx) {
switch (idx) {
case 0:
AlreadyFiredBackButton = false;
try{
if (navigator.app) {
navigator.app.exitApp();
} else if (navigator.device) {
navigator.device.exitApp();
}
}
catch(err) {
}
break;
case 1:
AlreadyFiredBackButton = false;
break;
}
}
});
}
else {
try {
AlreadyFiredBackButton = false;
myNavigator.popPage();
return;
}
catch(err) {
AlreadyFiredBackButton = false;
}
try {
AlreadyFiredBackButton = false;
myNavigator.resetToPage('home.html');
return;
}
catch(err2) {
AlreadyFiredBackButton = false;
}
}
}
}
catch(pageerror) {
AlreadyFiredBackButton = false;
}
}
Here’s my index.html where I’ve specified my login dialog:
<ons-template id="loginform.html">
<ons-dialog var="loginform" cancelable ng-controller="AppController">
<ons-toolbar inline>
<div class="center">
Change Credentials
</div>
</ons-toolbar>
<div class="login-form-div">
<p>
<input placeholder="Username" id="username" ng-model="email" class="text-input">
</p>
<p>
<input type="password" placeholder="Password" id="password" ng-model="password" class="text-input">
</p>
<div style="text-align: center" class="content-padded">
<ons-button style="width:48%;" ng-click="loginform.hide();">Cancel</ons-button>
<ons-button style="width:48%;" ng-click="saveCredentials(lfusername, lfpassword);">Save</ons-button>
</div>
</div>
</ons-dialog>
</ons-template>
Any ideas why the ons-dialog is not disappearing when hitting the backbutton on android?