angularjs - ionic /Angular 1.3 - 当 ionic 侧菜单存在于 View 中时，缺少 ionic 导航后退按钮

Question

我似乎无法弄清楚如何让后退按钮出现在包含 ionic 侧菜单指令的 View 上。

这是我想出的最简单的例子:
http://codepen.io/jsplaine/pen/YPxvXL?editors=101 .

请注意，状态 x.emptyView 和状态 x.emptySideMenu 中的 ion-views 是状态 x 的 ion-nav-view 的子级。

这是一个更深入的示例，其中存在一个实际填充的侧菜单:
http://codepen.io/jsplaine/pen/ZYJRYW?editors=101

这是第一个 codepen 的基本路由器:

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('app', {
      url: "/",
      templateUrl: "templates/home.html",
      controller: 'AppCtrl'
    })

    .state('x', {
      url: "/x",
      abstract: true,
      template: '<ion-nav-view animation="slide-left-right"/>'
    })

    .state('x.emptyView', {
      url: "/empty-view",
      templateUrl: "templates/empty_view_only.html"
    })

    .state('x.emptySideMenu', {
      url: "/empty-side-menu",
      templateUrl: "templates/empty_side_menu.html"
    })
})

更深入的代码笔还有第二个问题。根据您首先单击哪个选项卡，第二个或第三个，相应的模板会被缓存，以便将来导航到第二个和第三个模板。首先单击第二个，然后单击第三个。然后重新开始并先单击第 3 个，然后单击第 2 个。发生这种情况的事实让我认为我在某种程度上错误地使用了 ui-router。

我也不明白为什么我必须在 index.html 和抽象状态 ('x') 模板中定义 ion-nav-view。状态 'x' 不是 index.html 的子元素(空状态)吗？

有人可以弄清楚如何修改两个代码笔，以便后退按钮出现在包含 ionic 侧菜单指令的 View 上，并且对于第二个代码笔..第二个和第三个选项卡缓存问题已解决？

Answer 1

解决方案可以在这里看到:

http://codepen.io/jsplaine/pen/wBqNmw?editors=101

看来 ion-side-menus 的父 ion-view 需要一个子 ion-nav-bar，并且 enable-menu-with-back-views 必须设置为 true。

<!-- Side Menu Nav and Burger Defined -->
<script id="templates/side_menu_with_nav.html" type="text/ng-template">
   <ion-view view-title="Side Menu with Nav and Burger">
       <ion-nav-bar></ion-nav-bar> <!-- HERE -->
       <ion-side-menus enable-menu-with-back-views="true">
           <ion-side-menu-content>
               <ion-nav-bar> 
                   <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
                   <ion-nav-buttons side="right">
                       <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>                    
                   </ion-nav-buttons>
               </ion-nav-bar>
....

正如 ionic 指令/menuToggle 文档所述: https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1

• ### Button Hidden On Child Views
• By default, the menu toggle button will only appear on a root
• level side-menu page. Navigating in to child views will hide the menu-
• toggle button. They can be made visible on child pages by setting the
• enable-menu-with-back-views attribute of the {@link >ionic.directive:ionSideMenus}
• directive to true.