(ons-navigator) topPageの中身がJavaScript内で見えない

###前提・実現したいこと
Monacaでアプリ作成の勉強をしております。一覧画面から詳細画面に移る際、一覧画面で選んだリストに応じて詳細画面上に表示する内容を変化させたいと考えております。(Onsen UI2を使用)

###発生している問題・エラーメッセージ
そこでpushPageメソッドで渡した内容を遷移先ページでtopPageにて受け取り、詳細画面に文言を表示させようとしているのですが、JavaScript内でtopPageの内容が見えず、困っております。

具体的には、page2.html上で、

<h2>{{myNavigator.topPage.data.item}}</h2>  <!--1-->
<h2>{{myNavigator.topPage.data.index}}</h2> <!--2-->
<h2>{{AAA}}</h2> <!--3-- NaNが表示される-->

1, 2についてはpushPageメソッドから直接受け取っているためか、問題なく表示されています。問題は3で、 JavaScript内でtopPageを使用(indexの数値を計算に使う)した結果を表示させようとして、現状は「NaN」が表示されてしまいます。

.controller('detailController', function($scope){  
$scope.AAA = 5 + myNavigator.topPage.data.index;  
//    console.log(myNavigator.topPage.data.index); これを実施してもconsole.logの中身は表示されず先に進まない  
console.log($scope.AAA);  // null が表示される  
console.log("detailController end");  
});

myNavigator.topPage.data.indexはhtml上での記述と変えておりませんが、JavaScriptでは記述が異なるのでしょうか。あるいはそれ以外のことが原因でJavaScript内での処理が進まないのでしょうか。

ご確認いただけましたら幸いです。よろしくお願いいたします。

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

html
1```index.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="lib/onsenui/js/onsenui.min.js"></script>
11  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
12  <script src="js/myscript.js"></script>
13
14  <link rel="stylesheet" href="components/loader.css">
15  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
16  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
17  <link rel="stylesheet" href="css/style.css">
18
19</head>
20<body>
21
22  <ons-navigator page="page1.html" var="myNavigator"></ons-navigator>
23
24  <ons-template id="page1.html">
25    <ons-page ng-controller="listController">
26      <div class="content" style="text-align: center">
27      <ons-list>
28        <ons-list-item ng-repeat="item in test" modifier="chevron" ng-click="myNavigator.pushPage('page2.html', {data:{item: item.title, index: $index}})">
29            {{item.title}}    
30        </ons-list-item>
31      </ons-list>
32      </div>
33    </ons-page>
34  </ons-template>
35
36  <ons-template id="page2.html">
37    <ons-page ng-controller="detailController">
38      <ons-toolbar>
39        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
40        <div class="center">Page 2</div>
41      </ons-toolbar>
42      <div class="content" style="text-align: center">
43        <h2>{{myNavigator.topPage.data.item}}</h2>  <!--1-->
44        <h2>{{myNavigator.topPage.data.index}}</h2> <!--2-->
45        <h2>{{AAA}}</h2> <!--3-- NaNが表示される-->  
46      </div>
47    </ons-page>
48   <!--</ons-navigator>-->
49  </ons-template>
50  
51</body>
52</html>

javascript
1ons.bootstrap()
2  .controller('listController', function($scope) {
3    $scope.test = [
4        { title: 'Item 1', description: 'Item 1 Description' },
5        { title: 'Item 2', description: 'Item 2 Description' },
6        { title: 'Item 3', description: 'Item 3 Description' },
7        { title: 'Item 4', description: 'Item 4 Description' }
8    ]; 
9    console.log("listController end");
10  })
11 .controller('detailController', function($scope){
12    $scope.AAA = 5 + myNavigator.topPage.data.index;
13//    console.log(myNavigator.topPage.data.index); これを実施してもconsole.logの中身は表示されず先に進まない
14    console.log($scope.AAA);  // null が表示される
15    console.log("detailController end");
16  });
17  
18ons.ready(function() {
19    console.log("Onsen UI is ready!");
20});
21

###試したこと
akabeeさんのアドバイスを参考に、detailControllerの内容を以下のように変更して当該箇所が表示されるようになりました。

javascript
1 .controller('detailController', function($scope){
2        document.addEventListener("show", function(event) {
3        $scope.AAA = 5 + myNavigator.topPage.data.index;
4        console.log($scope.AAA);
5        $scope.$apply();
6    }, false);
7    console.log("detailController end");
8  });
9

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

回答2件

zhong_jian さん, akabee さん

再現用情報のご提供、ありがとうございます。
今回の問題につきましては、
ちょうど 2.2.4 の次のバージョンの 2.2.5 で修正されております。

angular1: myNavigator.topPage.data should now be ready by the time the controller runs. Fixed #1854.

https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md#v225

以下の Q&A に記載されているアップデート手順から Onsen UI を 2.2.5 以上にアップデートしていただけると幸いです。
2017/05/26 現在の Onsen UI (Monaca version) は Onsen UI 2.3.0 を搭載しておりますので、onsenui の方を追加していただく必要はありません。
https://teratail.com/questions/70143

よろしくお願いいたします。

投稿2017/05/26 11:17

asial-matagawa

総合スコア164

zhong_jian

2017/05/27 03:31

asial-matagawaさん調査いただきましてありがとうございます。早速「JS/CSSコンポーネントの追加と削除」からOnsenUIのバージョンアップを試みた（Onsen UI (Monaca Version) バージョン:2.3.0）のですが、最新バージョンがうまく反映できていないようです。恐れ入りますがバージョンアップ手順についてご教授いただけますでしょうか。バージョンアップ後の事象１：プロジェクトツリー上「www/lib」以下に新バージョンのファイルが追加されない。（旧バージョンのファイルのみ存在している）事象２：プロジェクトツリー上「www/coponents/monaca-onsenui」以下に新バージョンのファイルが格納された。事象３：コンソールに以下のようなメッセージが出力される。 WARNING: Tried to load angular more than once. ご提示のリンクのアップデート手順によりますと、「JS/CSSコンポーネントの追加と削除」から新バージョンを追加後、旧バージョンの「Onsen UI (Monaca Version)」を削除するとありますが、当方のプロジェクト上では「Onsen UI (Monaca Version)」が存在しておりませんでした。事象１と２の関係から、試しにindex.html上のJavaScriptとcssの呼び出しを「coponents/monaca-onsenui」に書き換えてみましたが、事象３は解消されませんでした。このような場合はどのように対応すればよろしいでしょうか。よろしくお願いいたします。

asial-matagawa

2017/05/27 12:25 編集

zhong_jian さん「JS/CSS コンポーネントの追加と削除」からコンポーネントを追加すると、www/lib ディレクトリ以下ではなく components/loader.js および components/loader.css にライブラリが読み込まれます。つまり、事象2は正常な動作です。また、www/lib ディレクトリは「JS/CSS コンポーネントの追加と削除」の管理外であるため、事象1も正常な動作です。参考リンク: https://docs.monaca.io/ja/manual/dependencies/components/ 事象3は components/loader.js 内と www/lib 内で2回 AngularJS と Onsen UI が読み込まれているのが原因です。www/lib 下のファイルと <script src="www/lib/~~~~"></script> を削除すると事象3は解消されます。もし「JS/CSS コンポーネントの追加と削除」を利用せずに www/lib の方を利用したい場合は、https://github.com/OnsenUI/OnsenUI-dist/releases から適切なバージョンの zip ファイルをダウンロードして解凍し、Monaca Cloud IDE のファイルツリー内の www/lib ディレクトリにドラッグ＆ドロップしてアップロードすることで更新が行えます。お手を煩わせてしまい申し訳ありません。よろしくお願いいたします。

zhong_jian

2017/05/27 06:45

asial-matagawaさんご回答ありがとうございます。コンポーネントの追加についてわたしの認識不足でした。ご回答の通りに www/lib から当該ファイルの削除と index.html 上から当該ファイルの呼び出しをコメントアウトしたところ、事象３のメッセージも消え、正常稼働するようになりました。topPageの問題も解消し、他部分と同タイミングで表示されるようになりました。こちらこそお手を煩わせてしまい申し訳ありませんでした。ありがとうございました。 akabeeさんにおかれましても最初のご回答以降もお付き合いいただき、ありがとうございました。

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

ベストアンサー

個人的には似たようなことをいくらでもしており上手く動いているのに、何故上手くいかないのだろうと思い試してみましたが確かにご提示の事象が発生していますね。

以下のように、ボタンで$scope.AAAの値を代入するようにすると値が入りますので、初期処理時にTopPageに値を格納するのが間に合っていないとかそういった類ではないかと予想します。

こちらの私の質問ではPopPage時に値がTopPageの値が受け取れないという内容が記載されていますが、似た事象かと。

詳しくは開発元に問い合わせ等が必要になるかもしれませんが、ひとまず、初期処理のタイミングをずらす等の対応で回避ができるかもしれません。

HTML
1<!DOCTYPE HTML>  
2<html>  
3<head>  
4<meta charset="utf-8">  
5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
6<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">  
7<script src="components/loader.js"></script>  
8<script src="lib/angular/angular.min.js"></script>  
9<script src="lib/onsenui/js/onsenui.min.js"></script>  
10<script src="lib/onsenui/js/angular-onsenui.min.js"></script>  
11<script src="js/myscript.js"></script>  
12
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
18</head>  
19<body>  
20
21<ons-navigator page="page1.html" var="myNavigator"></ons-navigator>  
22
23<ons-template id="page1.html">  
24<ons-page ng-controller="listController">  
25<div class="content" style="text-align: center">  
26<ons-list>  
27<ons-list-item ng-repeat="item in test" modifier="chevron" ng-click="myNavigator.pushPage('page2.html', {data:{item: item.title, index: $index}})">  
28{{item.title}}      
29</ons-list-item>  
30</ons-list>  
31</div>  
32</ons-page>  
33</ons-template>  
34
35<ons-template id="page2.html">  
36<ons-page ng-controller="detailController">  
37<ons-toolbar>  
38<div class="left"><ons-back-button>Page 1</ons-back-button></div>  
39<div class="center">Page 2</div>  
40</ons-toolbar>  
41<div class="content" style="text-align: center">  
42<h2>{{myNavigator.topPage.data.item}}</h2>  <!--1-->  
43<h2>{{myNavigator.topPage.data.index}}</h2> <!--2-->  
44<h2>{{AAA}}</h2> <!--3-- NaNが表示される-->    
45<ons-button ng-click="test()">test</ons-button>
46  
47</div>  
48</ons-page>  
49<!--</ons-navigator>-->  
50</ons-template>  
51
52</body>  
53</html>

JavaScript
1ons.bootstrap()  
2.controller('listController', function($scope) {  
3$scope.test = [  
4{ title: 'Item 1', description: 'Item 1 Description' },  
5{ title: 'Item 2', description: 'Item 2 Description' },  
6{ title: 'Item 3', description: 'Item 3 Description' },  
7{ title: 'Item 4', description: 'Item 4 Description' }  
8];   
9console.log("listController end");  
10})  
11.controller('detailController', function($scope){  
12$scope.AAA = 5 + myNavigator.topPage.data.index;  
13//    console.log(myNavigator.topPage.data.index); これを実施してもconsole.logの中身は表示されず先に進まない  
14console.log($scope.AAA);  // null が表示される  
15console.log("detailController end");  
16
17$scope.test = function(){
18  $scope.AAA = 5 + myNavigator.topPage.data.index;
19}
20
21});  
22
23ons.ready(function() {  
24console.log("Onsen UI is ready!");  
25});

投稿2017/05/26 04:53

akabee

総合スコア1947

zhong_jian

2017/05/26 06:44

早速のご回答ありがとうございます。ご提示の質問は拝見しておりましたが、私の事象と関係あるかどうか理解できておらず、試すことまではしておりませんでした。早速参考にさせていただき、$scope.$apply()を入れて試してみたところ、無事当該箇所が表示されるようになりました。（他よりも若干遅れての表示）対応内容を後ほど上のほうに記述しておきます。お忙しいところどうもありがとうございました。

akabee

2017/05/26 07:13

解決したようで良かったです。どういう事象で、どのように対応するのが良いのか開発元に聞いてみたいところですね。。。

asial-matagawa

2017/05/26 07:38 編集

Onsen UI チームの者です。「Android / iOS のバージョン」「Onsen UI のバージョン」「ブラウザのバージョン」等といった再現のための情報をいただけるとスムーズに調査ができますので、よろしければお教えいただけると幸いです。バージョン 2.2.3 未満の Onsen UI を Android 4.4.4 未満や iOS で利用するとご報告のような症状が発生する可能性があります。技術的な詳細につきましては以下のブログ記事をご覧ください。 https://ja.onsen.io/blog/onsenui-recent-updates-may-2017/ また、Onsen UI のバージョンアップ方法については以下の Q&A をご覧ください。 https://teratail.com/questions/70143 よろしくお願いいたします。

zhong_jian

2017/05/26 08:26

asial-matagawaさんご連絡ありがとうございます。 iPhone5Cの実機を使用しMonacaの実機デバッグにて動作確認をしています。 iOS 10.3.2 OnsenUI 2.2.4 Chrome 58.0.3029.110 (64-bit) よろしくお願いいたします。

akabee

2017/05/26 08:45

参考になるかどうか不明ですが、私はクラウドＩＤＥで再現確認を行っていました。プロジェクト新規作成→テンプレートとしてOnsenUI V2 Angular1 Minimumを選択→zhong_jianさんご提示のhtmlとJavaScriptをプロジェクトに追加、で再現します。 OnsenUI v2.2.4 Chrome バージョン 58.0.3029.110

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

あなたの回答