3

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

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

3 件の回答 3

1

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

<!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>
1

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

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

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

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

ons.bootstrap();
<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>

0

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

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

1
  • 上記ソースコードを参考に、「ng-show」「ng-hide」を活用して tabbarのメニュー変更を実装しました。 想定した通り、メニュー変更が実現できました。 ありがとうございます。 Commented 2015年8月28日 7:14

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。