

タイトルの通り、ons-tabbarのメニュー変更方法を探しております。  
具体的には、A画面からB画面に遷移した際、ons-tabbar内のons-tabタグを  
変更したいと思っております。

もしこの実装方法をご存知でしたら、ご教授のほどお願いいたします。


CC BY-SA 3.0
2015-08-28T00:21:05.297
14923
2015-08-28T06:14:25.447
9561
question
monaca onsen-ui angularjs cordova
<ons-tabbar>のメニューを変更するには


ng-showを使用してons-tabの表示をON/OFFすれば実現可能ではないでしょうか？  
各コントローラからindexControllerにON/OFFを通知します。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <script>
    var app = ons.bootstrap("myApp", ["onsen"]);
    app.controller("indexController", function($scope) {
        // フラグ定義
        $scope.isHome = false;
        $scope.isFav = false;
    
        $scope.$on("isHome", function(e, flag) {
            $scope.isHome = flag;
        });
        $scope.$on("isFav", function(e, flag) {
            $scope.isFav = flag;
        });
    });
    app.controller("homeController", ["$scope", "$rootScope", function($scope, $rootScope) {
        $rootScope.$broadcast("isHome", false);
        $rootScope.$broadcast("isFav", true);
    }]);
    app.controller("favController", ["$scope", "$rootScope", function($scope, $rootScope) {
        $rootScope.$broadcast("isHome", true);
        $rootScope.$broadcast("isFav", false);
    }]);
    app.controller("settingsController", ["$scope", "$rootScope", function($scope, $rootScope) {
        $rootScope.$broadcast("isHome", true);
        $rootScope.$broadcast("isFav", true);
    }]);
        </script>
    </head>
    <body ng-controller="indexController">
    <ons-navigator>
        <ons-tabbar>
            <ons-tab page="home.html" ng-show="isHome" active="true">
                <ons-icon icon="ion-home"></ons-icon>
                <span style="font-size: 12px">Home</span>
            </ons-tab>
            <ons-tab page="fav.html" ng-show="isFav">
                <ons-icon icon="ion-star"></ons-icon>
                <span style="font-size: 12px">Favorites</span>
            </ons-tab>
            <ons-tab page="settings.html">
                <ons-icon icon="ion-gear-a"></ons-icon>
                <span style="font-size: 12px">Settings</span>
            </ons-tab>
        </ons-tabbar>
    
        <ons-template id="home.html">
            <ons-page ng-controller="homeController">
                <ons-toolbar>
                    <div class="center">Home</div>
                </ons-toolbar>
            </ons-page>
        </ons-template>
    
        <ons-template id="fav.html">
            <ons-page ng-controller="favController">
                <ons-toolbar>
                    <div class="center">Fav</div>
                </ons-toolbar>
            </ons-page>
        </ons-template>
    
        <ons-template id="settings.html">
            <ons-page ng-controller="settingsController">
                <ons-toolbar>
                    <div class="center">Settings</div>
                </ons-toolbar>
            </ons-page>
        </ons-template>
    </ons-navigator>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-08-28T05:02:06.540
14934
2015-08-28T05:02:06.540
9566
14923
answer


ご回答いただき、誠にありがとうございます。

「ng-show」「ng-hide」の存在は調査した段階で知ったのですが、  
どう使うかはあまり理解していません。  
上記ソースを参考にして試行錯誤してみます。


CC BY-SA 3.0
2015-08-28T05:51:06.123
14937
2015-08-28T05:51:06.123
9561
14923
answer


> A画面からB画面に遷移した際

1つのタブで表示しているページの中で遷移（pushPage）をした時に別メニューを表示したいという前提での記載です。

遷移で階層が深くなるので、タブのメニューを変更するのではなく、  
それぞれにタブを用意した方が自然な気がします。

もし、タブAからタブBに切り替えた時にメニューを変更したいということであれば、  
画面設計を見直してタブを使わないようにした方が良いのではないかと思います。

[code]

    ons.bootstrap();
[/code]

[code]

    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
    
    <ons-navigator title="Navigator" var="myNavigator" page="page1.html">
    </ons-navigator>
    
    <ons-template id="page1.html">
      <ons-page>
        <ons-tabbar>
          <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
          <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
          <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
          <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
        </ons-tabbar>
      </ons-page>
    </ons-template>
    
    <ons-template id="home.html">
      <ons-toolbar>
        <div class="center">Home</div>
      </ons-toolbar>
    
      <div style="text-align: center">
        <br>
        <ons-button modifier="light" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
          Push Page
        </ons-button>
      </div>
    </ons-template>
    
    <ons-template id="comments.html">
      <ons-toolbar>
        <div class="center">Comments</div>
      </ons-toolbar>
    
      <p style="padding-top: 100px; color: #999; text-align: center">Comments Page Contents</p>
    </ons-template>
    
    <ons-template id="page2.html">
      <ons-page>
        <ons-tabbar>
          <ons-tab page="apple.html" label="apple" icon="apple" active="true"></ons-tab>
          <ons-tab page="css3.html" label="css3" icon="css3"></ons-tab>
          <ons-tab page="tags.html" label="github" icon="github"></ons-tab>
          <ons-tab page="settings.html" label="twtter" icon="ion-social-twitter"></ons-tab>
        </ons-tabbar>
      </ons-page>
    </ons-template>
    
    <ons-template id="apple.html">
      <ons-toolbar>
        <div class="left">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Apple</div>
      </ons-toolbar>
    
      <p style="padding-top: 100px; color: #999; text-align: center">Apple Page Contents</p>
    </ons-template>
    
    <ons-template id="css3.html">
      <ons-toolbar>
        <div class="center">CSS3</div>
      </ons-toolbar>
    
      <p style="padding-top: 100px; color: #999; text-align: center">CSS3 Page Contents</p>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-08-28T06:14:25.447
14939
2015-08-28T06:14:25.447
3516
14923
answer