2015-01-17 8 views
5

Ich möchte eine Tabbed-Ansicht in Side-Menü-App, sondern nur in einigen Ansichten der App platzieren. In einer Anwendung gibt es die folgenden Zustandsstruktur:ionische Registerkarten und Seitenmenü Geschichte

|--- Login    (login: menuContent) 
|--- Orders list   (app.orders: menuContent) 
    |--- Description  (app.orderTabs.description: orderTabs-description) 
    |--- Products   (app.orderTabs.products: orderTabs-products) 
     |--- New product (app.orderTabs.products.newProduct: orderTabs-products) 
|--- Alerts list   (app.alerts: menuContent) 
    |--- Description  (app.alertTabs: alertTabs-description) 
    |--- Settings   (app.alertTabs: alertTabs-settings) 

wobei jeder Eintrag | --- ViewTitle (state: Ionen nav-Ansichtsname)

menu.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> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Menu</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item nav-clear menu-close href="#/app/orders"> 
      Orders list 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/alerts"> 
      Alerts list 
     </ion-item> 
     <ion-item nav-clear menu-close ng-click="logout()"> 
      Logout 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

orderTabs.html:

<ion-tabs class="tabs-icon-top tab-bar"> 

    <ion-tab title="Order" icon="icon ion-clipboard" href="#/app/orderTabs/{{ data.order.id }}/description"> 
    <ion-nav-view name="orderTabs-description"></ion-nav-view> 
    </ion-tab> 


    <!-- products Tab --> 
    <ion-tab title="Products" icon="icon ion-checkmark-circled" href="#/app/orderTabs/{{ data.order.id }}/products" badge="data.badgeProducts" badge-style="badge-assertive"> 
    <ion-nav-view name="orderTabs-products"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

Ich mag würde, um von starten oder Produkte b quick zur Liste der Aufträge, weiß jemand, ob es möglich ist?

Für den Moment habe ich erreicht, Zurück-Schaltfläche in OrderTabs zu zeigen, aber beim Erstellen einer Ion-Tab-Ansicht wird der Verlauf gelöscht.

Aus Liste der Aufträge Controller:

$scope.goToOrder = function gotToOrder(orderId) { 
    $ionicViewSwitcher.nextDirection('forward'); 
    $ionicHistory.nextViewOptions({ 
     historyRoot: false 
    }); 
    $state.go('app.orderTabs.order', { 
     orderId: orderId 
    }); 
    }; 

Antwort

0

hatte ich das gleiche Problem wie du und ich fand nach der Suche heraus, dass dies tatsächlich etwas, das Ionic Team absichtlich implementiert aufgrund der Registerkarten Verlauf anzeigen, die auf ihrer besitzen, so dass sie die Ansichten, die Tab-Navigation überhaupt in der Geschichte haben, tatsächlich nicht aufzeichnen. Es sieht so aus, als würde dies in nächster Zeit nicht gelöst werden, und so habe ich am Ende eine modifizierte Tab-Implementierung erstellt. Ich ahme grundsätzlich das Aussehen der Tabs nach und kontrolliere dann den angezeigten Inhalt mit ng-show.

<div class="tabs-striped tabs-top"> 
    <div class="tab-nav tabs"> 
     <a class="tab-item" 
       ng-class="{'tab-item-active': tabs.active == 'description'}" 
       ng-click="tabs.active = 'description'"> 
      <span>Description</span> 
     </a> 
     <a class="tab-item" 
       ng-class="{'tab-item-active': tabs.active == 'pending'}" 
       ng-click="tabs.active = 'products'"> 
      <span>Products</span> 
     </a> 
    </div> 
</div>