onsenUIを使い始めたばかりの初心者です(angularどころか通常のjsも勉強中です)。
サンプルのOnsen UI Tabberをベースに作業を進めていますが、tabberのアイコンをタップしてページ遷移を行った際、遷移先のページではpushpageが効かなくなってしまいます。
ソースを見ると、Tabberから遷移した場合、navigaterが外れてしまう?ようです。
tabbarからの遷移をnavigater内で行わせるにはどうしたらいいのでしょうか?
1 件の回答
<ons-tab>
のpage
属性に<ons-navigator>
から始まるテンプレートを指定し、タブごとにページスタックの管理を行うのが基本的なやり方かと思います。
angular.module('app', ['onsen']);
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/onsenui.min.js"></script>
<body ng-app="app">
<ons-tabbar>
<ons-tab icon="home" page="nav1.html" active="true"></ons-tab>
<ons-tab icon="user" page="nav2.html"></ons-tab>
<ons-tab icon="gear" page="nav3.html"></ons-tab>
</ons-tabbar>
<ons-template id="nav1.html">
<ons-navigator page="page1-1.html" var="nav1"></ons-navigator>
</ons-template>
<ons-template id="page1-1.html">
<h1>page1-1</h1>
<ons-button ng-click="nav1.pushPage('page1-2.html')">Push</ons-button>
</ons-template>
<ons-template id="page1-2.html">
<h1>page1-2</h1>
<ons-button ng-click="nav1.popPage()">Pop</ons-button>
</ons-template>
<ons-template id="nav2.html">
<ons-navigator page="page2-1.html" var="nav2"></ons-navigator>
</ons-template>
<ons-template id="page2-1.html">
<h1>page2-1</h1>
<ons-button ng-click="nav2.pushPage('page2-2.html')">Push</ons-button>
</ons-template>
<ons-template id="page2-2.html">
<h1>page2-2</h1>
<ons-button ng-click="nav2.popPage()">Pop</ons-button>
</ons-template>
<ons-template id="nav3.html">
<ons-navigator page="page3-1.html" var="nav3"></ons-navigator>
</ons-template>
<ons-template id="page3-1.html">
<h1>page3-1</h1>
<ons-button ng-click="nav3.pushPage('page3-2.html')">Push</ons-button>
</ons-template>
<ons-template id="page3-2.html">
<h1>page3-2</h1>
<ons-button ng-click="nav3.popPage()">Pop</ons-button>
</ons-template>
</body>