我有一个基于标签模板的Ionic应用程序 . 我的应用程序的一般导航结构是:
-- users (/users)
-- user (/users/[id])
-- todos (/todos)
-- todo (/users/[id])
-- settings (/settings)
那里有一些嵌套视图(用户和待办事项) . 它们出现在相同的导航视图中,如下所示:
<ion-tabs class="tabs-icon-only tabs-color-assertive">
<ion-tab icon="ion-ios-pulse-strong" href="#/tab/users">
<ion-nav-view name="users-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-ios-pulse-strong" href="#/tab/todos">
<ion-nav-view name="todos-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-ios-pulse-strong" href="#/tab/settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
随着国家的定义:
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('users', {
url: '/users',
views: {
'users-tab': {
templateUrl: 'templates/tab-users.html',
controller: 'UsersCtrl'
}
}
})
.state('tabs.user', {
url: '/users/:userId',
views: {
'users-tab': {
templateUrl: 'templates/user-detail.html',
controller: 'UserCtrl'
}
}
})
.state('todos', {
url: '/todos',
views: {
'todos-tab': {
templateUrl: 'templates/tab-todos.html',
controller: 'TodosCtrl'
}
}
})
.state('tabs.todo', {
url: '/todos/:todoId',
views: {
'todos-tab': {
templateUrl: 'templates/todo-detail.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'settings-tab': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
在我的index.html文件中,我有以下内容:
<ion-nav-bar class="bar-light">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
我利用 ion-nav-back-button 处理de master-detail视图用户和待办事项 . 这完全自动工作,Ionic处理得非常好 . 除一例外 . 当我从另一个视图(例如users / 1)中引用todo的详细视图(例如/ todos / 3)时,后退按钮不会出现,并且无法返回到todos概述(/ todos) ) . 单击选项卡按钮无效,但转到/ todos / 3) .
我想这是预期的行为,但是有没有办法显示后退按钮,或者让标签按钮始终进入待办事项视图(/ todos)?
1 回答
我找到了解决方案 . 它并不理想,但它确实有效 . 而不是直接进入细节状态:
我首先进入主状态,并在承诺中进入详细状态:
超时并不是绝对必要的,但我发现有时它会在没有它的情况下失败 .