Ionic - beide Seitenmenü und Registerkarten

Question

Ich muss sowohl ein Sidemenü und Registerkarten auf dem gleichen Bildschirm in meinem Ionic App-Projekt implementieren.

Es funktioniert (fast). Ich möchte, dass meine unteren Registerkarten immer sichtbar sind, aber ich möchte auch aus dem Sidemenu zu einer anderen (dann tab) Ansicht navigieren können. Es sollte alle Tabs Menü sichtbar, aber mit allen Elementen inaktiv sein.

Meine Zustände Definition:

.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'); 

}); 

Meine base.html Vorlage:

<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> 

Grundsätzlich bin unten Tabs immer sichtbar, Ereignis keine seiner Produkte haben wollen, ist aktiv . Wenn eine der Registerkarten angeklickt wird, möchte ich sie als normal anzeigen.

Answer 1

Würde kommentieren, wenn ich könnte (keine Rep-Whoes), aber hier ist die Spur, die ich derzeit nach unten schaue, ob das dir überhaupt hilft oder dir einen Blitz der Inspiration gibt. Ich versuche das herauszufinden.

Hier ist eine ähnliche Frage an den Ionic Foren: http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

Der letzte Kommentar erwähnt eine Angular Methode namens $ ionicTabsDelegate mit einer Methode namens Showbar (Show), die auf eine boolean nimmt, ob die Leiste mit den Registerkarten zu zeigen.

Ref: http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/

Hier ist der Code, den ich zur Zeit produziert haben, obwohl es nicht zu funktionieren scheint (hoffentlich schließen es ist)?

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); 
    }; 
}); 

bearbeiten: Hier ist ein weiterer Ionic Forumsbeitrag zu diesem Thema mit dem, was ein Arbeits Codepen zu sein scheint Beispiel.

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