Angularjs 离子标签和侧菜单历史记录
我想在侧菜单应用程序中放置一个选项卡式视图,但只是在应用程序的一些视图中。在应用程序中,存在以下状态结构:Angularjs 离子标签和侧菜单历史记录,angularjs,ionic-framework,angular-ui-router,Angularjs,Ionic Framework,Angular Ui Router,我想在侧菜单应用程序中放置一个选项卡式视图,但只是在应用程序的一些视图中。在应用程序中,存在以下状态结构: |--- Login (login: menuContent) |--- Orders list (app.orders: menuContent) |--- Description (app.orderTabs.description: orderTabs-description) |--- Products
|--- 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(状态:ion nav视图名称)
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>
我和你一样也有同样的问题,搜索后我发现这实际上是Ionic团队故意实现的,因为tabs视图本身就有历史记录,所以它们实际上根本不记录历史记录中有tab导航的视图。看起来这个问题不会很快得到解决,所以我最终自己创建了修改后的tabs实现。我基本上模仿标签的外观,然后使用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>
描述
产品
$scope.goToOrder = function gotToOrder(orderId) {
$ionicViewSwitcher.nextDirection('forward');
$ionicHistory.nextViewOptions({
historyRoot: false
});
$state.go('app.orderTabs.order', {
orderId: orderId
});
};
<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>