質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,115

zhong_jian

score 10

前提・実現したいこと

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内での処理が進まないのでしょうか。

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

該当のソースコード

```index.html  
<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">  
<script src="components/loader.js"></script>  
<script src="lib/angular/angular.min.js"></script>  
<script src="lib/onsenui/js/onsenui.min.js"></script>  
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>  
<script src="js/myscript.js"></script>  

<link rel="stylesheet" href="components/loader.css">  
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">  
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">  
<link rel="stylesheet" href="css/style.css">  

</head>  
<body>  

<ons-navigator page="page1.html" var="myNavigator"></ons-navigator>  

<ons-template id="page1.html">  
<ons-page ng-controller="listController">  
<div class="content" style="text-align: center">  
<ons-list>  
<ons-list-item ng-repeat="item in test" modifier="chevron" ng-click="myNavigator.pushPage('page2.html', {data:{item: item.title, index: $index}})">  
{{item.title}}      
</ons-list-item>  
</ons-list>  
</div>  
</ons-page>  
</ons-template>  

<ons-template id="page2.html">  
<ons-page ng-controller="detailController">  
<ons-toolbar>  
<div class="left"><ons-back-button>Page 1</ons-back-button></div>  
<div class="center">Page 2</div>  
</ons-toolbar>  
<div class="content" style="text-align: center">  
<h2>{{myNavigator.topPage.data.item}}</h2>  <!--1-->  
<h2>{{myNavigator.topPage.data.index}}</h2> <!--2-->  
<h2>{{AAA}}</h2> <!--3-- NaNが表示される-->    
</div>  
</ons-page>  
<!--</ons-navigator>-->  
</ons-template>  

</body>  
</html>  
ons.bootstrap()  
.controller('listController', function($scope) {  
$scope.test = [  
{ title: 'Item 1', description: 'Item 1 Description' },  
{ title: 'Item 2', description: 'Item 2 Description' },  
{ title: 'Item 3', description: 'Item 3 Description' },  
{ title: 'Item 4', description: 'Item 4 Description' }  
];   
console.log("listController end");  
})  
.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");  
});  

ons.ready(function() {  
console.log("Onsen UI is ready!");  
});  

試したこと

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

.controller('detailController', function($scope){  
document.addEventListener("show", function(event) {  
$scope.AAA = 5 + myNavigator.topPage.data.index;  
console.log($scope.AAA);  
$scope.$apply();  
}, false);  
console.log("detailController end");  
});  

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

より詳細な情報

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

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

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

<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">  
<script src="components/loader.js"></script>  
<script src="lib/angular/angular.min.js"></script>  
<script src="lib/onsenui/js/onsenui.min.js"></script>  
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>  
<script src="js/myscript.js"></script>  

<link rel="stylesheet" href="components/loader.css">  
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">  
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">  
<link rel="stylesheet" href="css/style.css">  

</head>  
<body>  

<ons-navigator page="page1.html" var="myNavigator"></ons-navigator>  

<ons-template id="page1.html">  
<ons-page ng-controller="listController">  
<div class="content" style="text-align: center">  
<ons-list>  
<ons-list-item ng-repeat="item in test" modifier="chevron" ng-click="myNavigator.pushPage('page2.html', {data:{item: item.title, index: $index}})">  
{{item.title}}      
</ons-list-item>  
</ons-list>  
</div>  
</ons-page>  
</ons-template>  

<ons-template id="page2.html">  
<ons-page ng-controller="detailController">  
<ons-toolbar>  
<div class="left"><ons-back-button>Page 1</ons-back-button></div>  
<div class="center">Page 2</div>  
</ons-toolbar>  
<div class="content" style="text-align: center">  
<h2>{{myNavigator.topPage.data.item}}</h2>  <!--1-->  
<h2>{{myNavigator.topPage.data.index}}</h2> <!--2-->  
<h2>{{AAA}}</h2> <!--3-- NaNが表示される-->    
<ons-button ng-click="test()">test</ons-button>

</div>  
</ons-page>  
<!--</ons-navigator>-->  
</ons-template>  

</body>  
</html>  
ons.bootstrap()  
.controller('listController', function($scope) {  
$scope.test = [  
{ title: 'Item 1', description: 'Item 1 Description' },  
{ title: 'Item 2', description: 'Item 2 Description' },  
{ title: 'Item 3', description: 'Item 3 Description' },  
{ title: 'Item 4', description: 'Item 4 Description' }  
];   
console.log("listController end");  
})  
.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");  

$scope.test = function(){
  $scope.AAA = 5 + myNavigator.topPage.data.index;
}

});  

ons.ready(function() {  
console.log("Onsen UI is ready!");  
});  

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/26 16:37 編集

    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

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

    キャンセル

  • 2017/05/26 17:26

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

    キャンセル

  • 2017/05/26 17:45

    参考になるかどうか不明ですが、私はクラウドIDEで再現確認を行っていました。

    プロジェクト新規作成→テンプレートとしてOnsenUI V2 Angular1 Minimumを選択→zhong_jianさんご提示のhtmlとJavaScriptをプロジェクトに追加、で再現します。

    OnsenUI v2.2.4
    Chrome バージョン 58.0.3029.110

    キャンセル

+1

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/27 12:31

    asial-matagawaさん

    調査いただきましてありがとうございます。
    早速「JS/CSSコンポーネントの追加と削除」からOnsenUIのバージョンアップを試みた(Onsen UI (Monaca Version) バージョン:2.3.0)のですが、最新バージョンがうまく反映できていないようです。恐れ入りますがバージョンアップ手順についてご教授いただけますでしょうか。

    バージョンアップ後の事象1:
    プロジェクトツリー上「www/lib」以下に新バージョンのファイルが追加されない。
    (旧バージョンのファイルのみ存在している)

    事象2:
    プロジェクトツリー上「www/coponents/monaca-onsenui」以下に新バージョンのファイルが格納された。

    事象3:
    コンソールに以下のようなメッセージが出力される。
    WARNING: Tried to load angular more than once.


    ご提示のリンクのアップデート手順によりますと、「JS/CSSコンポーネントの追加と削除」から新バージョンを追加後、旧バージョンの「Onsen UI (Monaca Version)」を削除するとありますが、当方のプロジェクト上では「Onsen UI (Monaca Version)」が存在しておりませんでした。

    事象1と2の関係から、試しにindex.html上のJavaScriptとcssの呼び出しを「coponents/monaca-onsenui」に書き換えてみましたが、事象3は解消されませんでした。

    このような場合はどのように対応すればよろしいでしょうか。

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

    キャンセル

  • 2017/05/27 13:03 編集

    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 ディレクトリにドラッグ&ドロップしてアップロードすることで更新が行えます。

    お手を煩わせてしまい申し訳ありません。よろしくお願いいたします。

    キャンセル

  • 2017/05/27 15:45

    asial-matagawaさん

    ご回答ありがとうございます。コンポーネントの追加についてわたしの認識不足でした。
    ご回答の通りに www/lib から当該ファイルの削除と index.html 上から当該ファイルの呼び出しをコメントアウトしたところ、事象3のメッセージも消え、正常稼働するようになりました。topPageの問題も解消し、他部分と同タイミングで表示されるようになりました。

    こちらこそお手を煩わせてしまい申し訳ありませんでした。ありがとうございました。

    akabeeさんにおかれましても最初のご回答以降もお付き合いいただき、ありがとうございました。

    キャンセル

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる