

tabバーを使った構成でデザインを考えているのですが、最初のホームページではtabバーを表示したくありません(リンクはあります)。  
その他のページでは全てタブーバーを使いたいのですが、上手く設定する方法はありますでしょうか


CC BY-SA 3.0
2015-03-17T05:49:51.937
8005
2015-03-18T17:09:33.197
2015-03-18T07:55:00.453
7724
7724
question
monaca
home以外でtabbarを使ったデザイン


一応それっぽい動きはできている気はしますが、ちょっと不恰好です。  
**ngAnimate** とかうまく使えばもっと良い感じにできるかもしれません（すみません、そこまではできませんでした）。

[code]

    (function() {
        ons.bootstrap()
        .controller('mainCtrl', function($scope) {
          $scope.toTabbar = function(index) {
            if (index === 0) {
              $scope.home = true;
            } else if (index === 1) {
              $scope.comment = true;
            } else if (index === 2) {
              $scope.setting = true;
            }
            navi.pushPage('tabbar.html', { animation: 'slide' });
          };
        });
    })();
[/code]

[code]

    <head>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
        <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
        <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
    </head>
    <body>
      <ons-page ng-controller="mainCtrl">
        <ons-navigator var="navi">
          <ons-toolbar>
            <ons-toolbar-item class="center">HOME</ons-toolbar-item>
          </ons-toolbar>
          <br />
          <div style="text-align: center">
            <ons-button ng-click="toTabbar(0)">Home</ons-button>
            <ons-button ng-click="toTabbar(1)">Comment</ons-button>
            <ons-button ng-click="toTabbar(2)">Setting</ons-button>
          </div>
        </ons-navigator>
      </ons-page>
    
      <ons-template id="tabbar.html">
        <ons-page>
          <ons-tabbar var="tabbar">
            <ons-tabbar-item
                icon="home"
                label="Home"
                page="homeNavi.html"
                active="{{home}}"></ons-tabbar-item>
            <ons-tabbar-item
                icon="comment"
                label="Comments"
                page="commentNavi.html"
                active="{{comment}}"></ons-tabbar-item>
            <ons-tabbar-item
                icon="gear"
                label="Settings"
                page="settingNavi.html"
                active="{{setting}}"></ons-tabbar-item>
          </ons-tabbar>
        </ons-page>
      </ons-template>
    
      <ons-template id="homeNavi.html">
        <ons-navigator var="homeNavi" page="page1.html">
        </ons-navigator> 
      </ons-template>
    
      <ons-template id="commentNavi.html">
        <ons-navigator var="commentNavi" page="page2.html">
        </ons-navigator> 
      </ons-template>
    
      <ons-template id="settingNavi.html">
        <ons-navigator var="settingNavi" page="page3.html">
        </ons-navigator> 
      </ons-template>
    
      <ons-template id="page1.html">
        <ons-toolbar>
          <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
          <div class="center">Page 1</div>
        </ons-toolbar>
        <div style="text-align: center">
          <br />
          <ons-button ng-click="homeNavi.pushPage('page1-2.html')">
            Push New Page
          </ons-button>
        </div>
      </ons-template>
    
      <ons-template id="page2.html">
        <ons-toolbar>
          <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
          <div class="center">Page 2</div>
        </ons-toolbar>
        <div style="text-align: center">
          <h1>Page 2</h1>
        </div>
      </ons-template>
    
      <ons-template id="page3.html">
        <ons-toolbar>
          <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
          <div class="center">Page 3</div>
        </ons-toolbar>
        <div style="text-align: center">
          <h1>Page 3</h1>
        </div>
      </ons-template>
    
      <ons-template id="page1-2.html">
        <ons-toolbar>
          <div class="left"><ons-back-button>Back</ons-back-button></div>
          <div class="center">New Page</div>
        </ons-toolbar>
        <div style="text-align: center">
          <br />
          <ons-button ng-click="homeNavi.popPage();">
            Pop Page
         </ons-button>
        </div>
      </ons-template>  
    </body>
[/code]


CC BY-SA 3.0
2015-03-18T08:06:27.247
8055
2015-03-18T17:09:33.197
2015-03-18T17:09:33.197
3516
3516
8005
answer