侧面菜单干扰离子的标签视图

时间:2015-04-17 23:50:40

标签: jquery angularjs ionic-framework

我基本上有一个滑动菜单应用程序。每个菜单项都会打开一个视图,我在其中填充数据。这一切都很好,但在一个视图中,我想要一个带幻灯片的离子寻呼机。似乎滑动菜单不允许此控件工作。无论是那个,还是我做了一些根本错误的事情。

当我点击"事件G"菜单选项它来到事件图表html但幻灯片根本没有正确显示。 OTOH,如果我删除侧面菜单结构,视图效果很好。

我的menu.html:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <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-pane>


 <ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Options</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>


        <!-- this view works great - its a normal view -->
        <ion-item nav-clear menu-close href="#/app/events">
            <span class=" item-icon-left">
            <i class="icon ion-ios-calendar-outline"></i>
            </span>
          Events
        </ion-item>

          <!-- this view messes up the display -->
          <ion-item nav-clear menu-close href="#/app/events-graphs">
            <span class=" item-icon-left">
            <i class="icon ion-ios-calendar-outline"></i>
            </span>
          Events Graph Tabs
        </ion-item>

        <ion-item menu-close href="#/app/filters">
            <span class=" item-icon-left">
            <i class="icon ion-funnel"></i>
            </span>
          Filters
        </ion-item>

        <ion-item nav-clear menu-close href="#/app/login">
            <span class=" item-icon-left">
                <i class="icon ion-ios-gear-outline"></i>
            </span>
            Settings
        </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>


</ion-side-menus> 

现在这里是&#34; events-graphs&#34;

的代码

我没有发布任何控制器代码,因为他们目前没有做与此示例相关的任何事情。

<ion-view view-title="Monitor Event Summary" cache-view="false">


<ion-content>
      <ion-slide-box>
          <ion-slide-pager> </ion-slide-pager>
              <ion-slide>
                  <!-- <canvas tc-chartjs chart-type="bar" chart-options="options" chart-data="data" auto-legend></canvas> -->
                Slide 1
              </ion-slide>
              <ion-slide>
                   <div class="box blue"><h1>BLUE</h1></div>
              </ion-slide>
          <ion-slide>
                    Slide 3
              </ion-slide>

      </ion-slide-box>
   </ion-content>

</ion-view>

当我转到&#34;事件图表&#34;这是我的应用程序的样子。应该显示一个漂亮的3个屏幕的滑动窗口的视图。

Event Graph screen - messed up

如果我更改events-graph.html而不是显示3个标签,我就看不到标签图标,内容隐藏在导航栏下 - 所以我很确定我没有在侧面菜单 - 但我无法弄清楚是什么。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

删除<ion-slide-pager> </ion-slide-pager>。它已在其中一个测试版中删除。将show-pager="true"添加到<ion-slide-box>元素以显示寻呼机。