Question

我正在努力应对这么简单的事情。我有一个离子侧面菜单。我希望帖子页面是主页的子视图。但是当我从主页导航到帖子页面时，后退按钮丢失了。此外，我不确定如何定义导航栏（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>

Answer 1

后退按钮只需要在较高的模板中（不要在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}
         }
})

请参阅ionic example以更好地了解会发生什么。

Answer 2

尝试将.state（＆＃39; post＆＃39;）更改为.state（＆＃39; menu.post＆＃39;）以发布菜单的子项。

同样，如果post是home的sub，你可以像menu.home.post链接一样。

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

2 个答案: