離子 - 兼顧sidemenu和標籤

Question

我需要在我的Ionic應用程序項目的同一屏幕上實現sidemenu和標籤。

它正在工作（差不多）。我希望我的底部選項卡始終可見，但我也希望能夠從側邊菜單導航到其他（然後選項卡）視圖。 它應該保持所有選項卡菜單可見，但所有項目都處於非活動狀態。

我的狀態定義：

.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一個叫表演酒吧（顯示）方法角方法，它需要就是否顯示標籤欄的布爾。

編號：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); 
    }; 
}); 

編輯：這裏是什麼似乎沿着這個主題的另一個離子論壇上發帖是一個工作Codepen例。

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