読者です 読者をやめる 読者になる 読者になる

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>

以上です