

Onsen UIを使用してアプリの作成しています。  
トップページはタブバーを表示させないで、それ以外のページにタブバーを表示させたいと思っています。

トップページはhide-tabsを使用してタブバーを非表示にしたのですが、非表示にしたタブバーを表示するにはどうしたらよいでしょうか？

非表示  

宜しくお願いします。


CC BY-SA 3.0
2015-05-11T07:33:34.063
10034
2015-09-08T13:11:57.497
9675
question
onsen-ui
Onsen UI　ons-tabbarのhide-tabsの切り替え方法


うーん、こんな感じなんですかね。

[code]

    ons.bootstrap().controller('MainCtrl', function($scope) {
      $scope.hide = true;
      $scope.push = function() {
        myNavigator.pushPage('new_page.html');
        $scope.hide = false;
      }
      $scope.pop = function() {
        myNavigator.popPage();
        $scope.hide = true;
      }
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
    <body ng-controller="MainCtrl">
      <ons-tabbar var="tabbar" hide-tabs="{{hide}}">
        <ons-tabbar-item
          icon="home"
          label="Home"
          page="navigator.html"
          active="true"></ons-tabbar-item>
        <ons-tabbar-item
          icon="comment"
          label="Comments"
          page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
          icon="gear"
          label="Settings"
          page="page3.html"></ons-tabbar-item>
      </ons-tabbar>
    </body>
    
    <ons-template id="navigator.html">
      <ons-navigator var="myNavigator" page="page1.html">
      </ons-navigator> 
    </ons-template>
    
    <ons-template id="page1.html">
      <ons-toolbar>
          <div class="center">Page1</div>
      </ons-toolbar>
      
      <div style="text-align: center">
          <br />
          <ons-button
              ng-click="push();">
              Push New Page
          </ons-button>
      </div>
    </ons-template>
    
    <ons-template id="new_page.html">
      <ons-toolbar>
        <div class="center">New Page</div>
      </ons-toolbar>
      
      <div style="text-align: center">
        <br />
        <ons-button ng-click="pop();">
       Pop Page
       </ons-button>
      </div>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-05-11T12:44:37.423
10052
2015-05-11T12:44:37.423
3516
10034
answer


ご回答をありがとうございました。

お陰様で上手くできました。

トップページはリストで、タブのＨＯＭＥボタンでトップに戻りたかったので、下記のようにしました。

[code]

    <script>
        ons.bootstrap().controller('MainCtrl', function($scope) {
            $scope.hide = true;
            $scope.push = function(u) {
                if(u == "1") myNavigator.pushPage('page1.html');
                if(u == "2") myNavigator.pushPage('page2.html');
                if(u == "3") myNavigator.pushPage('page3.html');
                $scope.hide = false;
            }
            $scope.gohome = function() {
                myNavigator.pushPage('list.html');
                $scope.hide = true;
            }
    
        });
    </script>
    </head>
    <body ng-controller="MainCtrl">
        <ons-tabbar var="tabbar" hide-tabs="{{hide}}">
            <ons-tabbar-item
                icon="home"
                label="Home"
                page="navigator.html"
                ng-click="gohome();"
                active="true"></ons-tabbar-item>
        <ons-tabbar-item
                icon="comment"
                label="Comments"
                page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
                icon="gear"
                label="Settings"
                page="page3.html"></ons-tabbar-item>
        </ons-tabbar>
    </body>
    
    <ons-template id="navigator.html">
        <ons-navigator var="myNavigator" page="list.html">
        </ons-navigator> 
    </ons-template>
    
    <ons-template id="list.html">
        <ons-list>
            <ons-list-item modifier="chevron" ng-click="push(1);">page1</ons-list-item>
            <ons-list-item modifier="chevron" ng-click="push(2);">page2</ons-list-item>
            <ons-list-item modifier="chevron" ng-click="push(3);">page3</ons-list-item>
        </ons-list>
    </ons-template>
    
    <ons-template id="page1.html">
        <ons-toolbar>
            <div class="center">page1</div>
        </ons-toolbar>
        <div style="text-align: center">
            <br />
            TEST1
        </div>
    </ons-template>
    
    
    <ons-template id="page2.html">
        <ons-toolbar>
            <div class="center">page2</div>
        </ons-toolbar>
        <div style="text-align: center">
            <br />
            TEST2
        </div>
    </ons-template>
    
    
    <ons-template id="page3.html">
        <ons-toolbar>
            <div class="center">page3</div>
        </ons-toolbar>
        <div style="text-align: center">
            <br />
            TEST3
        </div>
    </ons-template>
    
[/code]


CC BY-SA 3.0
2015-05-12T02:45:08.390
10067
2015-05-12T02:45:08.390
9675
10034
answer


既に解決済みだと思いますが、

[code]

    tabbar.setTabbarVisibility(true);
    
[/code]

ドキュメントには無いので、正当な手段ではないかもしれませんが。


CC BY-SA 3.0
2015-09-08T13:11:57.497
16387
2015-09-08T13:11:57.497
12249
10034
answer