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

时间:2016-06-10 09:34:27

标签: angularjs ionic-framework navigation angular-ui-router parent-child

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

2 个答案:

答案 0 :(得分:0)

后退按钮只需要在较高的模板中(不要在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以更好地了解会发生什么。

答案 1 :(得分:0)

尝试将.state(&#39; post&#39;)更改为.state(&#39; menu.post&#39;)以发布菜单的子项。

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