Menu
My app contain ons-dialog on a imageclick that opens image in a dialog.But I am unable to handle hardware device back button.It is showing error of 'Capturing Back button handler is failure.So how to do it???Please help.
Code :
<ons-template id="ImagePopup.html">
<ons-dialog style="height:100%;width:100%;background:#000000;" var="naviDialog" cancelable ng-device-backbutton="click();" animation="fade" true>
<img id="PopImg" style="height:50%;width:100%;padding-top:30%">
</ons-dialog>
</ons-template>
773
I had the same problem when using the dialog component from within an ons-navigator object. In order to make it work, I had to disable the default back button handler of the dialog and have the Navigator object handle it instead.
Here is the code I made, hope it helps:
ons.createDialog('dialogs/yourDialog.html').then(function(dialog) {
dialog.getDeviceBackButtonHandler().disable();
var f = function(event) {
dialog.hide();
myNavigator.getDeviceBackButtonHandler().setListener(function(event) {
try{
myNavigator.popPage();
}
catch (err){
event.callParentHandler();
}
});
}
myNavigator.getDeviceBackButtonHandler().setListener(f);
dialog.show({parentScope: $scope});
});
Brief explanation:
134
The default deviceButton behavior for dialog is hiding. In order to change it you can do it in this way:
ons.bootstrap().controller('MyController', function($scope) {
$scope.hideDialog = true;
$scope.changeMode = function() {
$scope.hideDialog = !$scope.hideDialog;
if ($scope.hideDialog) {
console.log('now hiding');
$scope.dialog.getDeviceBackButtonHandler().setListener(function() { $scope.dialog.hide();});
} else {
console.log('now printing');
$scope.dialog.getDeviceBackButtonHandler().setListener(function() { console.log('hey!');});
}
};
ons.ready(function() {
ons.createDialog('dialog.html').then(function(dialog) {});
});
});
And this is the example HTML:
<body ng-controller="MyController">
<ons-template id="dialog.html">
<ons-dialog var="dialog" cancelable>
<p>Mode: {{ hideDialog ? "Hide Dialog" : "ConsoleLog Hey" }}</p>
<p><ons-button ng-click="changeMode()">Change Mode</ons-button></p>
</ons-dialog>
</ons-template>
<ons-page>
<p><ons-button ng-click="dialog.show()">Show Dialog</ons-button></p>
</ons-page>
</body>
I just tested that in Onsen UI 1.3.8 and Monaca, seems working well.
Hope it helps!
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
