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と呼ばれる角度方法に言及しています。

参考：（うまくいけば、それは近いです）動作するようには思えませんが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