如何在Ons-Dialog上处理硬件后退按钮？

Question

我的应用程序包含ons-dialog on imageclick,在对话框中打开图像.但我无法处理硬件设备后退按钮.它显示错误'捕获后退按钮处理程序失败.所以怎么做???请帮助.

代码:

<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>

Answer 1

在ons-navigator对象中使用对话框组件时遇到了同样的问题.为了使它工作,我不得不禁用对话框的默认后退按钮处理程序,让Navigator对象代替它.

这是我制作的代码,希望它有所帮助:

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});
});

简要说明:

• 禁用对话框后退按钮处理程序(这是导致错误的原因)
• 禁用时,后退按钮将由具有后退按钮处理程序(在本例中为myNavigator)的下一个节点处理,该处理程序正常工作.
• 在显示对话框时更改myNavigator的事件侦听器,以隐藏对话框.
• 隐藏它后,我尝试恢复其默认功能.它是一个Navigator对象,所以popPage应该是默认操作,如果页面堆栈为空(什么引发错误),我们将调用父处理程序(通常会让你离开应用程序)