Meteor-Ionic：侧边菜单按钮在点击时消失答案

【问题标题】：Meteor-Ionic: Sidemenu buttons disappear on clickMeteor-Ionic：侧边菜单按钮在点击时消失
【发布时间】：2015-06-06 22:32:08
【问题描述】：

我正在尝试将流星离子库 (https://github.com/meteoric/meteor-ionic) 用于我的应用程序。我想出了如何添加左侧菜单。但是每当我导航到另一个页面时，左上角的导航按钮和中心标题就会消失。这些按钮仅在新加载索引页面时出现。如果我从浏览器的边缘一直拖动，我可以拉出菜单。一个

这里是html：

<template name="layout">
  {{#ionBody}}
    {{#ionSideMenuContainer}}
      {{#ionSideMenus}}
        {{#ionSideMenu}}
          <div class="bar bar-header bar-dark">
            <h1 class="title">Menu</h1>
          </div>
          <div class="content has-header">
            <div class="list">
              {{> sideNavItems}}
              <div class="item item-icon-right" data-ion-menu-close>
                Close Me {{> ionIcon icon="ios-arrow-right"}}
              </div>
            </div>
          </div>
        {{/ionSideMenu}}
      {{/ionSideMenus}}

      {{#ionSideMenuContent}}
        {{#contentFor "headerButtonLeft"}}
          <button class="button button-clear pull-left" data-ion-menu-toggle="left">
            {{> ionIcon icon='navicon'}}
          </button>
        {{/contentFor}}
        {{#contentFor "headerTitle"}}
          <h1 class="title">MyApp</h1>
        {{/contentFor}}
        {{> ionNavBar class="bar-positive"}}
        {{#ionNavView}}
          {{> yield}}
        {{/ionNavView}}
      {{/ionSideMenuContent}}
    {{/ionSideMenuContainer}}
  {{/ionBody}}
</template>

<template name="sideNavItems">
  <div class="item item-icon-right" data-ion-menu-close>
    <a href="{{ pathFor 'page1'}}">Page1</a>
  </div>
  <div class="item item-icon-right" data-ion-menu-close>
    <a href="{{ pathFor 'page2'}}">Page2</a>
  </div>
</template>

<template name="page1">
  {{#ionContent}}
    <p>Page1</p>
  {{/ionContent}}
</template>

【问题讨论】：

标签： html meteor navigation ionic-framework

【解决方案1】：

根据Meteoric ionNavBar，“headerButtonLeft”、“headerTitle”和“headerButtonRight”是 ionNavBar 的组件。

我建议您在创建 ionNavBar 后通过为每个模板设置这些组件来设置这些：

<template name="page1">
  {{#contentFor "headerButtonLeft"}}
    <button class="button button-clear pull-left" data-ion-menu-toggle="left">
      {{> ionIcon icon='navicon'}}
    </button>
  {{/contentFor}}
  {{#contentFor "headerTitle"}}
    <h1 class="title">MyApp</h1>
  {{/contentFor}}

  {{#ionView}}
    <p>Page1</p>
  {{/ionView}}
</template>

【讨论】：