Ion tabs and sidebar history

Question

I would like to place a tab in a third-party menu application, but only in some application views. The application has 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) 

- every entry | --- ViewTitle (state: name-ion-navigation view)

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 the description or products back to the list of orders, does anyone know if this is possible?

At the moment, I have reached to display the button in the orderTabs button, but when I create the ion tab view, the story is saved.

From the list of order controllers:

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

Answer 1

I had the same problem as you, and after searching, I found out that this is actually the fact that the Ionic command is implemented specifically because the tab view has a history on its own, so they actually do not record views that have navigation tab generally in history. It seems that this will not be resolved in the near future, so I decided to create a modified implementation of the tabs myself. I basically mimic the look of the tabs and then control the content shown with 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>