离子侧菜单:页面上没有后退按钮



我正在为这样一件简单的事情而挣扎。我有一份离子菜单。我希望帖子页面是主页的子视图。但当我从主页导航到帖子页面时,后退按钮不见了。此外,我不知道如何定义导航栏(index.html,menu.html或post.html)

路由器:

$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('menu.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl',
resolve: {authResolve: authResolve}
}
}
})
.state("post", {
url: "/home/:uid/:postId",
templateUrl: "templates/timeline/post.html",
controller: "PostCtrl as post",
resolve: {authResolve: authResolve}
})

index.html:

<body ng-app="starter" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar>
<ion-nav-back-button side="left" class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>

menu.html:

<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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>

post.html:

<ion-view>
<ion-nav-bar>
<ion-nav-back-button side="left" class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>

后退按钮只需要在较高的模板中(不要在post.html中重复)。要激活post.html中的后退按钮,视图需要是menu.html模板中的子视图。要做到这一点,post.html路由需要声明为:

.state("menu.post", { 
url: "/post/:uid/:postId",
views: 
'menuContent' :{
templateUrl: "templates/timeline/post.html",
controller: "PostCtrl as post",
resolve: {authResolve: authResolve}
}
})

请参阅离子示例以更好地了解发生了什么。

尝试将.state('post')更改为.state,使post成为菜单的子菜单。

同样,如果post是home的子,你可以像menu.home.post.一样将其链接起来

相关内容

  • 没有找到相关文章

最新更新