首页 文章

ionic / angular 1.3 - 当视图中存在离子侧菜单时，缺少离子导航后退按钮

提问于
浏览 次
6

我似乎无法弄清楚如何让一个后退按钮出现在包含ion-side-menus指令的视图上 .

在这里's the absolute simplest example I'提出：http://codepen.io/jsplaine/pen/YPxvXL?editors=101 .

请注意，状态x.emptyView和状态x.emptySideMenu中的离子视图是状态x的离子导航视图的子视图 .

这是一个更深入的示例，其中存在实际填充的侧边菜单：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"
    })
})

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

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

有人可以弄清楚如何修改两个codepens，以便后退按钮出现在包含ion-side-menus指令的视图中，对于第二个codepen ..第二和第三个选项卡缓存问题是否已解决？

angularjs ionic-framework ionic

2 回答

  • 3

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

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

    看来离子侧菜单的父离子视图需要一个子离子导航条，并且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>
....

    作为离子指令/ menuToggle docs状态：https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1

    ###隐藏在子视图上的按钮默认情况下，菜单切换按钮仅显示在根级别侧菜单页面上 . 导航到子视图将隐藏菜单切换按钮 . 通过将{@link> ionic.directive：ionSideMenus}指令的enable-menu-with-back-views属性设置为true，可以在子页面上显示它们 .

    回复于
  • 5

    我想知道作者是否没有考虑你的情况 . 他们的模型是一个滑入式菜单，只能部分滑动，可以用菜单图标切换 . 所以你可能有点偏离范式，但这似乎对我有用，尽管在模板中复制导航条代码有点蹩脚 .

    <script id="templates/empty_side_menu.html" type="text/ng-template">
  <ion-view view-title="Empty side menu">
    <ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-stable">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-side-menus>           
    </ion-side-menus>
  </ion-view>
</script>
    回复于

相关问题