###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/27 03:31
2017/05/27 12:25 編集
2017/05/27 06:45