タイトルの通り、ons-tabbarのメニュー変更方法を探しております。
具体的には、A画面からB画面に遷移した際、ons-tabbar内のons-tabタグを
変更したいと思っております。
もしこの実装方法をご存知でしたら、ご教授のほどお願いいたします。
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>
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>
ご回答いただき、誠にありがとうございます。
「ng-show」「ng-hide」の存在は調査した段階で知ったのですが、
どう使うかはあまり理解していません。
上記ソースを参考にして試行錯誤してみます。