离子标签和侧边菜单历史记录 [英] ionic tabs and side menu history

问题描述

我想在侧边菜单应用程序中放置一个选项卡式视图，但只是在应用程序的某些视图中.在一个应用程序中有以下状态结构:

|--- 登录(登录:menuContent)|--- 订单列表(app.orders: menuContent)|--- 描述 (app.orderTabs.description: orderTabs-description)|--- 产品 (app.orderTabs.products: orderTabs-products)|--- 新产品 (app.orderTabs.products.newProduct: orderTabs-products)|--- 警报列表(app.alerts: menuContent)|--- 描述 (app.alertTabs: alertTabs-description)|--- 设置(app.alertTabs:alertTabs-settings)

作为每个条目|--- ViewTitle(状态:ion-nav-view name)

menu.html:

<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"></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">菜单</h1></ion-header-bar><离子含量><离子列表><ion-item nav-clear menu-close href="#/app/orders">订单清单</ion-item><ion-item nav-clear menu-close href="#/app/alerts">警报列表</ion-item><ion-item nav-clear menu-close ng-click="logout()">登出</ion-item></ion-list></离子含量></ion-side-menu></ion-side-menus>

orderTabs.html:

<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><!-- 产品标签--><ion-tab title="Products" icon="icon ion-checkmark-circled" href="#/app/orderTabs/{{ data.order.id }}/products"badge="data.badgeProducts" 徽章-风格=徽章-断言"><ion-nav-view name="orderTabs-products"></ion-nav-view></ion-tab></ion-tabs>

我希望能够从描述或产品返回到订单列表，有人知道是否可行吗?

目前我实现了在 orderTabs 中显示后退按钮，但是在创建 ion-tab 视图时，历史记录被清除.

来自订单控制器列表:

 $scope.goToOrder = function gotToOrder(orderId) {$ionicViewSwitcher.nextDirection('forward');$ionicHistory.nextViewOptions({历史根:假});$state.go('app.orderTabs.order', {订单编号:订单编号});};

解决方案

我遇到了和你一样的问题，经过搜索我发现这实际上是 Ionic 团队有意实施的，因为选项卡视图在其上有历史记录自己的，所以他们实际上根本不记录历史中具有标签导航的视图.看起来这个问题不会很快得到解决，所以我最终自己创建了修改后的选项卡实现.我基本上模仿选项卡的外观，然后使用 ng-show 控制显示的内容.

<div class="tab-nav tabs"><a class="tab-item"ng-class="{'tab-item-active': tabs.active == 'description'}"ng-click="tabs.active = '描述'"><span>描述</span></a><a class="tab-item"ng-class="{'tab-item-active': tabs.active == 'pending'}"ng-click="tabs.active = '产品'"><span>产品</span></a>

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

解决方案

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>

这篇关于离子标签和侧边菜单历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！