【Monaca】Onsen UI ons-splitterとons-navigatorを組み合わせる

Monacaの「Onsen UI V2 JS Splitter」のサンプルやOnsen UIons-splitterの実例では、ons-splitter-contentloadメソッドでページの切り替えを行っていますが、ons-navigatorを組み合わせてページ遷移を行うサンプルがないので、どのようにすればよいか悩む方も多いと思います。

ons-splitter-content内にons-navigatorを組み込み、メニューで項目を選択した場合、ons-splitter-contentではなく、ons-navigatorのページを切り替えることで実現できます。
Continue reading

【Monaca】ons-splitter、ons-tabbar、ons-navigatorを組み合わせる

動作環境:AngularJS V1 + Onsen UI V2
【Monaca】Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法」に基づき、新規プロジェクトを作成。

1.ログインページとタブ表示ページを切り替えるため、ons-splitterを使用する。
2.ons-page内にons-tabbarを組み込むと、タイミングによりmyTabbarを参照できないため、ディレクティブを使用する。
3.ons-navigatorons-page内に組み込む必要がある。
4.タブ切り替えのタイミングでons-navigatorで表示するページを初期ページに戻す必要がある。

※2017/08/30 コード修正済み。タブ切り替え時にons-navigatorが追加される不具合を修正。
※2018/01/10 コード修正済み。

Continue reading