angularjs – 离子选项卡和侧面菜单历史记录

发布时间：2020-12-17 18:04:01 所属栏目：安全来源：网络整理

导读：我想在侧面菜单应用程序中放置一个标签视图,但只是在应用程序的一些视图中.在应用程序中,有以下状态结构： |--- Login (login: menuContent)|--- Orders list (app.orders: menuContent) |--- Description (app.orderTabs.description: orderTabs-descriptio

我想在侧面菜单应用程序中放置一个标签视图,但只是在应用程序的一些视图中.在应用程序中,有以下状态结构：

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

每个条目| — ViewTitle(状态：离子导航视图名称)

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>

我希望能够从描述或产品回到订单列表,任何人都知道是否可能？

目前我实现了在orderTabs中显示后退按钮,但是在创建离子选项卡视图时,历史记录被清除.

从订单控制器列表：

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

解决方法

我遇到了和你一样的问题,在搜索之后我发现这实际上是由于标签视图有自己的历史记录,Ionic团队故意实现的,所以他们实际上根本没有记录带有标签导航的视图在历史上.看起来这不会很快得到解决,所以我最终创建了自己的修改标签实现.我基本上模仿了标签的外观,然后使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!