离子标签和侧面菜单的历史 [英] ionic tabs and side menu history
问题描述
我想向侧面菜单里面的应用程序标签视图，只是在应用的一些看法。在应用程序中有以下状态的结构：
| ---登录（登录：menuContent）
| ---订单列表（app.orders：menuContent）
| ---说明（app.orderTabs.description：orderTabs-说明）
| ---产品（app.orderTabs.products：orderTabs产品）
| ---新产品（app.orderTabs.products.newProduct：orderTabs产品）
| ---警报列表（app.alerts：menuContent）
| ---说明（app.alertTabs：alertTabs-说明）
| ---设置（app.alertTabs：alertTabs的设置）
是每个条目| --- ViewTitle（状态：离子导航视图名称）
menu.html：
＆LT;离子侧菜单使菜单与 - 背意见=false的＆GT;
＆LT;离子侧面菜单内容＆GT;
＆LT;离子导航栏类=扎稳＆GT;
＆LT;离子NAV-后退按钮＆GT;
＆LT; /离子NAV-后退按钮＆GT; ＆LT;离子NAV-按键侧=左＆GT;
＆LT;按钮类=按钮，按钮图标按钮清晰离子navicon菜单切换=左＆GT;
＆LT; /按钮＆GT;
＆LT; /离子NAV-按钮＆GT;
＆LT; /离子导航栏＆GT;
＆LT;离子导航视图名称=menuContent＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子侧面菜单内容＆GT; ＆LT;离子侧面菜单侧=左＆GT;
＆LT;离子标题栏类=扎稳＆GT;
＆LT; H1类=标题＆GT;菜单＆LT; / H1＆GT;
＆LT; /离子头吧＆GT;
＆LT;离子含量＆GT;
＆LT;离子列表＆gt;
＆LT;离子项目NAV-清晰的菜单近距离的href =＃/应用/订单＆GT;
订单列表
＆LT; /离子项目＆GT;
＆LT;离子项目NAV-清晰的菜单近距离的href =＃/应用程序/警报＆GT;
快讯列表
＆LT; /离子项目＆GT;
＆LT;离子项目NAV-清晰的菜单近距离NG点击=退出（）＆GT;
登出
＆LT; /离子项目＆GT;
＆LT; /离子列表＆gt;
＆LT; /离子含量＆GT;
＆所述; /离子侧菜单＆gt;
＆LT; /离子侧菜单＆GT;
orderTabs.html：
＆LT;离子标签类=标签图标顶标签栏＆GT; ＆LT;离子分页标题=订单图标=图标离子剪贴板的href =＃/应用/ orderTabs / {{data.order.id}} /描述＆GT;
＆LT;离子导航视图名称=orderTabs-描述＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子标签＆gt;
＆LT;！ - 产品标签 - ＆GT;
＆LT;离子分页标题=产品图标=图标离子对勾盘旋的href =＃/应用/ orderTabs / {{data.order.id}} /产品徽章=data.badgeProductsbadge-风格=徽章主见＆GT;
＆LT;离子导航视图名称=orderTabs产品＆GT;＆LT; /离子NAV-视图＆gt;
＆LT; /离子标签＆gt;＆LT; /离子标签＆GT;
我希望能够从描述或产品回的订单列表中去，任何一个知道是否有可能？
目前我实现了显示早在orderTabs按钮，但创造离子标签时，查看历史记录将被清除。
从接单控制器列表：
$ scope.goToOrder =功能gotToOrder（订单ID）{
$ ionicViewSwitcher.nextDirection（前进）;
$ ionicHistory.nextViewOptions（{
historyRoot：假的
}）;
$ state.go（'app.orderTabs.order'，{
订单ID：订单
}）;
};
我有同样的问题，就像你和搜索，我发现，这其实是一件离子团队而实施，由于标签查看其历史后的自己的，所以他们实际上并没有记录有标签导航在历史上所有的意见。它看起来像这不会解决任何时间很快，所以我结束了创建我自己的修改标签的实现。我基本上是模仿的标签的外观，然后使用控制NG-节目显示的内容。
＆LT; DIV CLASS =标签条纹标签顶＆GT;
＆LT; DIV CLASS =选项卡，导航标签＆GT;
＆LT;一类=标签项
NG-CLASS ={标签项主动：tabs.active =='说明'}
NG-点击=tabs.active ='描述'＆GT;
＆LT;跨度＆GT;说明与LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT;一类=标签项
NG-CLASS ={标签项主动：tabs.active =='待定'}
NG-点击=tabs.active ='产品'＆GT;
＆LT;跨度＆GT;产品＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
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屋！
