angularjs – ionic / angular 1.3 – 当视图中存在离子侧菜单时

发布时间：2020-12-17 10:19:14 所属栏目：安全来源：网络整理

导读：我似乎无法弄清楚如何让一个后退按钮出现在包含ion-side-menus指令的视图上. 这是我提出的绝对最简单的例子： http://codepen.io/jsplaine/pen/YPxvXL?editors=101. 请注意,状态x.emptyView和状态x.emptySideMenu中的离子视图是状态x的离子导航视图的子视图.

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

这是我提出的绝对最简单的例子：
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 ..第二和第三个选项卡缓存问题是否已解决？

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

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

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

### 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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!