Question

我的应用程序在图像点击上包含ons-dialog，在对话框中打开图像。但是我无法处理硬件设备后退按钮。它显示错误＆＃39;捕获后退按钮处理程序失败。所以怎么做它???请帮忙。

代码：

<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的事件侦听器，以隐藏对话框。
隐藏后，我尝试恢复其默认功能。它是导航器对象，因此popPage应该是默认操作，如果是页面堆栈是空的（什么引发错误）我们将调用父处理程序（通常会让你离开应用程序）

Answer 2

我遇到了类似的错误，但是我使用了destroy函数并且它正常工作。我举了一个例子，希望有所帮助。

<强> dialog.destroy（）;

<ons-template id="navigator.html">
    <ons-dialog style="height: 80%;" var="naviDialog" cancelable ng-controller="ShowNotiController">
        <ons-navigator var="myNav">
            <ons-toolbar inline>
                <div class="center">
                    {{ "sLang_notifications_Data" | sLang }} {{ data}}
                </div>
            </ons-toolbar>
            <div style="text-align: center">
                <p>
                <strong>{{ "sLang_notifications_Subject" | sLang }}</strong> {{ subject | htmlToPlaintext }}
                </p>
                <p>
                <strong>{{ "sLang_notifications_Message" | sLang }}</strong>{{ message | htmlToPlaintext }}
                </p>
                <p>
                <ons-button onclick="naviDialog.destroy();"> {{ "sLang_notifications_Close" | sLang }}</ons-button>
                <ons-button onclick="myNav.pushPage('next.html')">Next</ons-button>
                </p>
            </div>
        </ons-navigator>
    </ons-dialog>
</ons-template>

Answer 3

这对我有用

 onDeviceReady: function() {
    this.receivedEvent('deviceready');
    document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
 if(document.querySelector('ons-modal').visible){
   document.querySelector('ons-modal').hide();
  e.preventDefault();
 }}

Answer 4

只是为了最近更新这里的任何人。我遇到了同样的问题，但现在发现对话框有一个“禁用”功能。因此，我将对话框设置为在用户确认弹出窗口后禁用此功能。

似乎您也可以从其他页面使用它来禁用对话框。

function hideDialog(id) {
    document.getElementById(id).hide();
    document.getElementById(id).disabled = true;
};


<ons-dialog id="some-dialog">
    <div class="disclaimer-text-wrap">Lorem Ipsum</div>
    <div class="disclaimer-button-wrap">
        <ons-button onclick="hideDialog('some-dialog');">Close</ons-button>
    </div>
</ons-dialog>

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

4 个答案: