ionic tabs and side menu history

Question

I would like to place a tabbed view inside side menu app, but just in some views of the app. In an app there is the following state structure:

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

being each entry |--- ViewTitle (state: ion-nav-view name)

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>

I would like to be able to go from Description or Products back to list of orders, any one know if it is possible?

For the moment I achieved to show back button in orderTabs, but when creating an ion-tab view the history is cleared.

From list of orders controller:

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

icyKira icyKira · Accepted Answer · 2015-08-25T22:39:39

I had the same issue like you and after searching I found out that this is actually something that Ionic team implemented on purpose due to the tabs view having history on its own, so they actually don't record the views that have tab navigation at all in the history. It looks like at this is not going to be resolved any time soon so I ended up creating modified tabs implementation on my own. I basically mimic the look of the tabs and then control the content shown using 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>

ionic tabs and side menu history

1 Answers