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