popPageで指定したoption.dataをpopされた画面で受け取りたい

###前提・実現したいこと
OnsenUI2 + AngularJS + Monacaで開発を実施しています。

下記ドキュメントにありますように、popPageではoptions.dataの指定が可能となっています。
https://ja.onsen.io/v2/docs/angular1/ons-navigator.html

インターネット上には、popPageでoptions.dataは利用できないとの内容の回答もあるようですが、
下記参照しますと最近（2016年3～10月ごろ？）になって利用できるよう変更されているようです。

https://community.onsen.io/topic/669/poppage-does-not-send-data-in-options/2
https://github.com/OnsenUI/OnsenUI/pull/1435

ですが、下記コードをOnsenUIのチュートリアルで試してみても意図した通りに動作しておらず、popPage後の画面のmyNavigator.topPage.data.title1には値が入っていないように思います。
※下記コードはOnsenUI2 + AngularJSのチュートリアルStack Navigationのコードを多少改変したものです

これは意図されたとおりの動作かどうか、ご教示いただけませんでしょうか。

###該当のソースコード

HTML
1<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
2
3<ons-template id="page1.html">
4  <ons-page>
5    <ons-toolbar>
6      <div class="center">{{ myNavigator.topPage.data.title1 }}</div>
7    </ons-toolbar>
8
9    <p>This is the first page.</p>
10
11    <ons-button ng-click="myNavigator.pushPage('page2.html', {data: {title2: 'Page 2'}})">Push page</ons-button>
12  </ons-page>
13</ons-template>
14
15<ons-template id="page2.html">
16  <ons-page>
17    <ons-toolbar>
18      <div class="left"><ons-back-button>Back</ons-back-button></div>
19      <div class="center">{{ myNavigator.topPage.data.title2 }}</div>
20    </ons-toolbar>
21
22    <p>This is the second page.</p>
23    <ons-button ng-click="myNavigator.popPage( {data: {title1: 'Page 1'}})">Poppage</ons-button>
24  </ons-page>
25</ons-template>

###補足情報(言語/FW/ツール等のバージョンなど)
以下URL（OnsenUIのチュートリアルページ）のHTML部分にソースコードをコピーすることで再現できます。
https://ja.onsen.io/tutorial/?framework=angular1&category=Reference&module=navigator

参考URLによりますとOnsenUIのチュートリアルページは常に最新バージョンのOnsenUIで実行されるようですので、バージョンが古い等の原因も無いと考えます。

行動規範の内容に同意します

回答1件

ベストアンサー

原因

多分ですが、myNavigator.topPage.dataがangularjsの双方向バインディングの対象になっていため変更状態が画面に反映されていないのだと思います。
※なのでデータが渡ってきていないわけではない

処理の順番

１．popPage実行
２．page1の画面描画（この時点でmyNavigator.topPage.dataの結果はまだpage2の状態）
３．showイベント（この時点でmyNavigator.topPage.dataの結果はpage1の状態）

３の時点で画面の表示が書き換わってほしいのですが、myNavigator.topPage.dataはangularjsのデータバインディングのチェック対象になっていないようなので画面に更新がかかっていません

対処

とりあえずangularjsの画面更新「$scope.$apply();」をしてあげることで対応しました。

動作確認リンク

html
1<html>
2
3<head>
4
5  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.5/js/onsenui.js"></script>
7  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.5/js/angular-onsenui.js"></script>
8
9  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.5/css/onsenui.min.css">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.5/css/onsen-css-components.min.css">
11
12  <script>
13    var app = ons.bootstrap();
14    
15    app.controller('page1Ctr', function($scope) {
16      document.addEventListener("show", function(event) {
17        console.log(myNavigator.topPage.data);
18        $scope.$apply();
19      }, false);
20    });
21    
22  </script>
23</head>
24
25<body>
26  <ons-navigator var="myNavigator" page="page1.html"></ons-navigator>
27
28  <ons-template id="page1.html">
29    <ons-page ng-controller="page1Ctr">
30      <ons-toolbar>
31        <div class="center">{{ myNavigator.topPage.data.title1 }}</div>
32
33      </ons-toolbar>
34
35      <p>This is the first page.</p>
36
37      <ons-button ng-click="myNavigator.pushPage('page2.html', {data: {title2: 'Page 2'}})">Push page</ons-button>
38    </ons-page>
39  </ons-template>
40
41  <ons-template id="page2.html">
42    <ons-page>
43      <ons-toolbar>
44        <div class="left">
45          <ons-back-button>Back</ons-back-button>
46        </div>
47        <div class="center">{{ myNavigator.topPage.data.title2 }}</div>
48      </ons-toolbar>
49
50      <p>This is the second page.</p>
51      <ons-button ng-click="myNavigator.popPage( {data: {title1: 'Page 1'}})">Poppage</ons-button>
52    </ons-page>
53  </ons-template>
54</body>
55
56</html>

投稿2017/01/06 16:42

編集2017/01/06 16:45

pinpikokun

総合スコア376

akabee

2017/01/10 02:43

ご回答いただきありがとうございます。$scope.$applyを実行すれば受け取れるのですね。ただ、提示の再現コードでも該当事象が確認できると思われますが、受け取りまでに多少時間がかかりますね。実際に開発しているコードでは、TopPageの値を受け取って様々な初期化処理を実施しているのですが、初期化処理までに受け取りが間に合っておらず上手くいきませんでした。ひとまずサービスでの受け渡しを実施するコードを回避策として実装しており、そちらでは上手く動いていますので、今回はサービスでの受け渡しを実施することにします。ありがとうございました。

行動規範の内容に同意します