我正在为这样一件简单的事情而挣扎。我有一份离子菜单。我希望帖子页面是主页的子视图。但当我从主页导航到帖子页面时,后退按钮不见了。此外,我不知道如何定义导航栏(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.一样将其链接起来