ons-sliding-menuがある画面でのAndroid実機の戻るボタンを押下時で閉じたいのですができなくて困ってます。

Onsen UI V2+AngularJS(V1) + cordovaでMonacaで開発しております。
aページからサイドメニューがあるbページへ移動し、bページ上でAndroid実機の戻るボタンをタップした際にアプリを閉じたいのですが、ng-device-backbuttonが効いていないためか閉じれませんでした。（on-device-backbuttonも効きませんでした。）
方法が間違っているのでしょうか。ご教授願います。

html
1index.html
2<!DOCTYPE HTML>
3<html>
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8    <script src="components/loader.js"></script>
9    <script src="lib/angular/angular.min.js"></script>
10    <script src="components/monaca-jquery/jquery.js"></script>
11    <script src="lib/onsenui/js/onsenui.min.js"></script>
12    <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
13    <link rel="stylesheet" href="components/loader.css">
14    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
15    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
16    <link rel="stylesheet" href="css/style.css">
17    <script>
18        app = ons.bootstrap('APP', ['onsen']);
19        
20        ons.ready(function() {
21           myNavigator.pushPage("a.html");
22            });
23    </script>
24</head>
25<body>
26    <ons-navigator var="myNavigator"></ons-navigator>
27</body>
28</html>

HTML
1a.html
2<ons-page id="A" ng-controller="termsController">
3    <ons-toolbar fixed-style="true">
4        <div class="left">
5            <ons-back-button ></ons-back-button>
6        </div>
7    </ons-toolbar>
8    <pre>{{terms_message}}</pre>
9    <div class="button">
10        <ons-button id="next_page">次の画面へ</ons-button>
11    </div>
12</ons-page>

JavaScript
1top_clickBackButton = function() {
2    myNavigator.app.exitApp();
3};
4$(document).on('click', '#next_page', function() {
5        myNavigator.pushPage("b.html");
6});
7
8app.controller('topPageController', ['$scope', '$timeout', function($scope, $timeout) {
9}]);
10app.controller('termsController', ['$scope', '$timeout', function($scope, $timeout) {
11}]);
12app.controller('sideMenuController', ['$scope', '$timeout', function($scope, $timeout) {
13}]);

html
1b.html
2<ons-page ng-device-backbutton="top_clickBackButton()">
3    <ons-sliding-menu main-page="top_page_main.html" close-on-tap menu-page="side_menu.html" 
4        side="left" max-slide-distance="250px" var="top_page_menu">
5    </ons-sliding-menu>
6</ons-page>

html
1top_page_main.html
2<ons-page id="top_page_main" ng-controller="topPageController" >
3    <ons-toolbar fixed-style="true">
4        <div class="left">
5            <ons-toolbar-button onclick="top_page_menu.toggleMenu()">
6                <ons-icon icon="fa-bars"></ons-icon>    
7            </ons-toolbar-button>
8        </div>
9    </ons-toolbar>
10</ons-page>

html
1side_menu.html
2<ons-page id="side_menu" ng-controller="sideMenuController">
3    <ons-toolbar fixed-style="true">
4        <div class="center">サイドメニュー</div>
5    </ons-toolbar>
6</ons-page>

回答2件

自己解決

以下の方法で解決できました。

以下のように上記ソースを修正します。

javaScript
1top_clickBackButton = function() {
2    //myNavigator.app.exitApp();
3    navigator.app.exitApp();
4};
5
6
7app.controller('topPageController', ['$scope', '$timeout', function($scope, $timeout) {
8    var page = myNavigator.topPage;
9       console.log(page);
10            
11       page.onDeviceBackButton = function() {
12           top_clickBackButton();
13       };
14}]);

https://ja.onsen.io/v2/docs/guide/angular1/from-v1-to-v2.html

おまけ：
myNavigator.pushPage("b.html");から
myNavigator.replacePage("b.html");
に変更することで、Ａ⇒Ｂへページ遷移する場合のみは可能でした。

投稿2017/04/13 11:17

huckepain

総合スコア14

topPageControllerなどのコードがありませんでしたので、再現できませんでした。
経験則ですが、Popoverに不具合？があるのか、createPopoverを使用するとその分端末側の戻るボタンが効かなくなるという事象があるようです。createPopoverを実行した分戻るボタンを押せば、有効になります。
コードがないため確認できませんが、上記に該当していないかご確認ください。

※なお上記に該当していた場合、createPopoverを実行した分だけons-popoverのhideメソッドを実行することで回避できます。おそらく、戻るボタンを押すという動作をhideメソッドで実行してしまうことで回避しているのだと思います。

投稿2017/04/04 12:20

編集2017/04/04 12:23

akabee

総合スコア1945

回答へのコメント

huckepain

2017/04/04 23:51

akabeeさん、ご回答ありがとうございます。質問させてください。 ons-popoverを使用していないのですが、 onsen uiの項目で追加されるものがあるということでしょうか。確認していて、 ng-device-backbuttonが効かないので、アプリを閉じるということができませんが、 Aページに戻っているので、戻るボタン自体が効かないではないみたいです。各Controllerのコードを追加しました。

akabee

2017/04/05 00:42

>onsen uiの項目で追加されるものがあるということでしょうか。 onsen uiの項目とは何のことを指していますか？追加されるとはどういうことですか？追加していないのに追加されるということですか？ Controllerのコードは追加されましたが、AngularJSのモジュールの定義も、モジュールを読み込んでいる箇所もありませんね。もしこれが実際に動かしているコードであれば、AngularJSの初期化ができていないのではないでしょうか。これは実際に動かしているコードでしょうか？調べたくても、huckepainさんが陥っている現象を再現させられないのでは調べられません・・・

huckepain

2017/04/05 02:07

＞>onsen uiの項目で追加されるものがあるということでしょうか。＞onsen uiの項目とは何のことを指していますか？追加されるとはどういうことですか？追加していない＞のに追加されるということですか？ ons-list-itemのように、実際の動作中の際にdivタグが追加されていたので、そういう形で追加される項目が存在しているのかと思いました。認識違いで申し訳ございません。コピーミスがありましたが、上記ソースでMonaca上動作しております。 ※jQuery (Monaca Version) の追加も必要です。

15分調べてもわからないことは
teratailで質問しよう！