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

Question

我的应用程序在 imageclick 上包含 ons-dialog，它在 dialog.But 中打开图像我无法处理硬件设备 button.It 显示错误“捕获后退按钮处理程序是 failure.So 怎么办？？？请帮忙。

代码：

<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

dialog 的默认 deviceButton 行为是隐藏的。为了改变它，你可以这样做：

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

这就是例子 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>

我刚刚在 Onsen UI 1.3.8 和 Monaca 中测试过，似乎运行良好。

希望对您有所帮助！

Answer 2

我在 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 应该是默认操作，并且，如果页面堆栈为空（抛出错误）我们将调用父处理程序（通常会让您退出应用程序）

Answer 3

我有类似的错误，但我使用了销毁功能并且它工作正常。我举个例子，希望对你有帮助。

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 4

这对我有用

 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 5

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

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

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 上的硬件后退按钮？

How to handle hardware Back Button on Ons-Dialog?

dialog

back-button

cordova

onsen-ui