Как обращаться с аппаратной кнопкой Back on Ons-Dialog?

Мое приложение содержит ons-диалог на imageclick, который открывает изображение в диалоговом окне. Но я не могу обработать кнопку обратной связи с аппаратным устройством. Он показывает ошибку "Обработчик кнопки Capturing Back" - это сбой. Так как это сделать? Пожалуйста, помогите.

Код:

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

ОТВЕТЫ

Ответ 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});
});

Краткое объяснение:

  • Отключить обработчик кнопки обратной связи (это то, что вызывает ошибки).
  • При отключении кнопка "Назад" будет обрабатываться следующим node, у которого есть обработчик кнопки назад (myNavigator, в данном случае), который отлично работает.
  • Измените прослушиватель событий myNavigator при отображении диалога, чтобы скрыть диалог.
  • После скрытия я пытаюсь восстановить его функциональность по умолчанию. Это Navigator, поэтому popPage должен быть действием по умолчанию, и, если стек страницы пуст (что вызывает ошибку), мы будем называть родительский обработчик (который, как правило, выведет вас из приложения)

Ответ 2

Поведение устройства по умолчанию для dialog скрыто. Чтобы изменить его, вы можете сделать это следующим образом:

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, кажется, работает хорошо.

Надеюсь, что это поможет!

Ответ 3

У меня была аналогичная ошибка, но я использовал функцию 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>

Ответ 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();
 }}