Question

我试图在我的应用上实现一个侧边栏，这样我就可以在其中存储菜单相关的选项，但我的问题是每当我整合离子侧栏菜单时，它总是隐藏我的主要内容。

例如，每当我不在代码中添加侧边栏指令时，即使我使用ionic-header-bar指令，一切都可以正常工作。但每当我将标题栏包装在侧边菜单中时，它外面的所有内容都会消失。它好像侧面菜单推送或重叠所有其他现有内容，除非我从DOM中删除它。

请参阅下面的屏幕截图。我应该看到旁边菜单右侧的内容：

谢谢！

http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0

<html ng-app="ionicApp">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      <title>Ionic Template</title>
      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
      <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
      <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
      <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
   </head>
   <body ng-controller="MyCtrl">
      <ion-side-menus enable-menu-with-back-views="false">
         <ion-side-menu-content>
            <ion-nav-bar class="bar-stable">
               <ion-nav-back-button>
               </ion-nav-back-button>
               <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>
         <ion-side-menu side="left">
            <ion-header-bar class="bar-stable">
               <h1 class="title">Left</h1>
            </ion-header-bar>
            <ion-content>
               <ion-list>
                  <ion-item menu-close ng-click="login()">
                     Login
                  </ion-item>
                  <ion-item menu-close href="#/app/search">
                     Search
                  </ion-item>
                  <ion-item menu-close href="#/app/browse">
                     Browse
                  </ion-item>
                  <ion-item menu-close href="#/app/playlists">
                     Playlists
                  </ion-item>
               </ion-list>
            </ion-content>
         </ion-side-menu>
      </ion-side-menus>
      <ion-content>
         <ion-slide-box on-slide-changed="slideHasChanged($index)">
            <ion-slide>
               <div class="box blue">
                  <h1>BLUE</h1>
               </div>
            </ion-slide>
            <ion-slide>
               <div class="box yellow">
                  <h1>YELLOW</h1>
               </div>
            </ion-slide>
            <ion-slide>
               <div class="box pink">
                  <h1>PINK</h1>
               </div>
            </ion-slide>
         </ion-slide-box>
      </ion-content>
   </body>
</html>

Ionic-side-menu隐藏了我的所有主要内容

0 个答案: