ionic(cordova)でion-tabsで画面ごとに各タブの表示・非表示を切り替える
やりたかったのはページによってタブの中身を動的に変更したり、タブの数自体を変更したり、タブ自体を非表示にしたり。そんな感じです。ionicというよりはangular-ui-routerの使い方になるのかな。いちおうメモしておきます。$stateChangeStartでページが変更されたタイミングがハンドリングできるのでここでページを見て表示、表示を切り替えてるだけですが。
app.js
angular.module('starter', ['ionic']) .run(function($ionicPlatform) { ・・・ }) // ルーティング .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state("tab", { url: "/tab", abstract: true, views: { main: { templateUrl: "templates/tab.html", controller: "TabCtrl" } } }) ・・・ .state("tab.page2", { url: "/page2", views: { "tab2": { templateUrl: "templates/page2.html", controller: "Page2Ctrl" } } }) // コントローラー .controller("TabCtrl", function($scope, $state) { // 基本は全てのタブを表示 $scope.showTab1 = true; $scope.showTab2 = true; $scope.$on("$stateChangeStart", function(event, toState) { // Page2の場合はタブを1つだけ表示 if (toState.name == "tab.page2") { $scope.showTab1 = true; $scope.showTab2 = false; } }); });
templates/tab.html
<ion-tabs> <ion-tab title="タブ1" href="#/tab/page" hidden={{!showTab1}}> <ion-nav-view name="tab1"></ion-nav-view> </ion-tab> <ion-tab title="タブ2" href="#/tab/page2" hidden={{!showTab2}}> <ion-nav-view name="tab2"></ion-nav-view> </ion-tab> </ion-tabs>
以上です