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

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

新規登録して質問してみよう
ただいま回答率
87.20%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

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

akabee
akabee

総合スコア0

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

1クリップ

3664閲覧

投稿2017/01/06 11:31

編集2022/01/12 10:58

###前提・実現したいこと
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

<ons-navigator var="myNavigator" page="page1\.html"></ons-navigator> <ons-template id="page1\.html"> <ons-page> <ons-toolbar> <div class="center">{{ myNavigator\.topPage\.data\.title1 }}</div> </ons-toolbar> <p>This is the first page\.</p> <ons-button ng-click="myNavigator\.pushPage\('page2\.html', {data: {title2: 'Page 2'}}\)">Push page</ons-button> </ons-page> </ons-template> <ons-template id="page2\.html"> <ons-page> <ons-toolbar> <div class="left"><ons-back-button>Back</ons-back-button></div> <div class="center">{{ myNavigator\.topPage\.data\.title2 }}</div> </ons-toolbar> <p>This is the second page\.</p> <ons-button ng-click="myNavigator\.popPage\( {data: {title1: 'Page 1'}}\)">Poppage</ons-button> </ons-page> </ons-template>

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

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。