Ionic-側面菜單和選項卡

Question

我需要在Ionic應用程序項目的同一屏幕上實現側面菜單和選項卡。

它正在（幾乎）工作。 我希望底部的標簽始終可見，但是我也希望能夠從側面菜單導航到其他（然后是標簽）視圖。 它應保持所有選項卡菜單可見，但所有項目均處於非活動狀態。

我的州定義：

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/base.html'
  })

  .state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only.
    url: '/locations',
    views: {
      'menuContent': {
        templateUrl: 'templates/views/locations.html',
        controller: 'LocationsCtrl'
      }
    }
  })

  .state('app.home', {
    url: '/home',
    views: {
      'tab-home': {
        templateUrl: 'templates/tabs/home.html',
        controller: 'HomeCtrl'
      }
    }
  })

  .state('app.history', {
      url: '/history',
      views: {
        'tab-history': {
          templateUrl: 'templates/tabs/history.html',
          controller: 'HistoryCtrl'
        }
      }
    })

  .state('app.messages', {
    url: '/messages',
    views: {
      'tab-messages': {
        templateUrl: 'templates/tabs/messages.html',
        controller: 'MessagesCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/app/home');

});

我的base.html模板：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view> <!-- IS IT OK?? -->

    <ion-tabs class="tabs-icon-top tabs-color-active-positive">

      <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home">
        <ion-nav-view name="tab-home"></ion-nav-view>
      </ion-tab>

      <ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history">
        <ion-nav-view name="tab-history"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive">
        <ion-nav-view name="tab-messages"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="item item-divider">Location: B17726</ion-item>
        <ion-item menu-close href="#/app/locations">
          Login
        </ion-item>
        <ion-item menu-close>
          Search
        </ion-item>
        <ion-item menu-close>
          Browse
        </ion-item>
        <ion-item menu-close>
          Playlists
        </ion-item>
        <ion-item class="item item-divider">
          General
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

基本上，我希望底部標簽始終可見，如果沒有任何項目處於活動狀態。 單擊選項卡之一時，我想正常顯示它。

Answer 1

如果可以（如果沒有），我會發表評論，但這是我目前正在尋找的路線，如果這對您有幫助或給您帶來靈感。 我也想弄清楚這一點。

在離子論壇上，這是一個類似的問題： http : //forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

最后一條評論提到了一個名為$ ionicTabsDelegate的Angular方法，以及一個名為showBar（show）的方法，該方法對是否顯示選項卡欄采用布爾值。

參考： http : //ionicframework.com/docs/api/service/%24ionicTabsDelegate/

這是我當前生成的代碼，盡管它似乎不起作用（希望它已經關閉了）？

index.html

<ion-content class="side-menu-left" ng-controller="AppCtrl">
  <ion-list <!--Irrelevant Stuff Here-->>
    <ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close>
      <i class="icon ion-information-circled"></i>About Us</ion-item>

  <!-- More Menu Items Here etc. -->

controllers.js

.controller('AppCtrl', function($scope, $ionicTabsDelegate) {

    $scope.showTabs = function() {
        $ionicTabsDelegate.showBar(true);
    };
});

編輯 ：這是關於該主題的另一個Ionic論壇帖子，以及似乎可以工作的Codepen示例。

• forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
• codepen.io/gnomeontherun/pen/tbvdH