

onsenUIを使い始めたばかりの初心者です（angularどころか通常のjsも勉強中です）。  
サンプルのOnsen UI
Tabberをベースに作業を進めていますが、tabberのアイコンをタップしてページ遷移を行った際、遷移先のページではpushpageが効かなくなってしまいます。  
ソースを見ると、Tabberから遷移した場合、navigaterが外れてしまう？ようです。  
tabbarからの遷移をnavigater内で行わせるにはどうしたらいいのでしょうか？


CC BY-SA 3.0
2015-10-14T05:04:10.470
17629
2016-10-05T07:32:23.683
12771
question
monaca onsen-ui
onsenUIのnavigaterとtabberの関連付けについて


`<ons-tab>`の`page`属性に`<ons-
navigator>`から始まるテンプレートを指定し、タブごとにページスタックの管理を行うのが基本的なやり方かと思います。

[code]

    angular.module('app', ['onsen']);
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-11-03T11:20:05.633
18360
2015-11-03T11:20:05.633
8532
17629
answer