

Monaca Onsen UIにおいて、ons-
dialogを使用してダイアログを表示し、Android版Monacaデバッガーの戻るボタンを押下すると、ログに"Capturing backbutton-
handler is failure."と記録され、ダイアログが閉じません。  
ちなみに、ons-navigatorをコメントアウトすると正常にダイアログが閉じるようですが、page1-page2の画面遷移は機能しません。

なにかよい方法はないでしょうか？  
よろしくお願いします。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap();
            function showDialog() {
                ons.createDialog("dialog.html").then(
                    function(dialog) {
                        dialog.show();
                    });
            }
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator">
            <ons-page>
                <ons-toolbar>
                    <div class="center">Page1</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    <ons-button onclick="showDialog()">Show dialog</ons-button>
                    <br>
                    <br>
                    <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
                </div>
            </ons-page>
    
            <ons-template id="page2.html">
                <ons-page var="page2">
                    <ons-toolbar>
                        <div class="center">Page2</div>
                    </ons-toolbar>
                    <div style="text-align: center">
                        <br>
                        <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                    </div>
                </ons-page>
            </ons-template>
    
            <ons-template id="dialog.html">
                <ons-dialog var="dialog" cancelable>
                    <ons-toolbar fixed-style inline>
                        <div class="center">Dialog</div>
                    </ons-toolbar>
                    <div style="text-align: center">
                        <br>
                        How are you?
                    </div>
                </ons-dialog>
            </ons-template>
        </ons-navigator>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-05-02T03:58:31.013
9763
2015-08-06T15:51:35.810
9566
question
monaca onsen-ui
Monaca Onsen UI ダイアログ表示後、戻るボタンを押下すると、"Capturing backbutton-handler is failure."となる


自己解決しました。  
ダイアログを表示する前に戻るボタンのハンドラーを無効にして、閉じるときに有効に戻します。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap();
            function showDialog() {
                ons.createDialog("dialog.html").then(
                    function(dialog) {
                        myNavigator.getDeviceBackButtonHandler().disable();
                        dialog.show();
                        dialog.on("posthide",
                            function() {
                                myNavigator.getDeviceBackButtonHandler().enable();
                            });
                    });
            }
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator">
            <ons-page>
                <ons-toolbar>
                    <div class="center">Page1</div>
                </ons-toolbar>
                <div style="text-align: center">
                    <br>
                    <ons-button onclick="showDialog()">Show dialog</ons-button>
                    <br>
                    <br>
                    <ons-button onclick="myNavigator.pushPage('page2.html')">Show page2</ons-button>
                </div>
            </ons-page>
    
            <ons-template id="page2.html">
                <ons-page var="page2">
                    <ons-toolbar>
                        <div class="center">Page2</div>
                    </ons-toolbar>
                    <div style="text-align: center">
                        <br>
                        <ons-button onclick="myNavigator.popPage()">Show page1</ons-button>
                    </div>
                </ons-page>
            </ons-template>
    
            <ons-template id="dialog.html">
                <ons-dialog var="dialog" cancelable>
                    <ons-toolbar fixed-style inline>
                        <div class="center">Dialog</div>
                    </ons-toolbar>
                    <div style="text-align: center">
                        <br>
                        How are you?
                    </div>
                </ons-dialog>
            </ons-template>
        </ons-navigator>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-05-12T05:04:17.653
10071
2015-05-12T05:04:17.653
9566
9763
answer