Meteor-Ionic: Sidemenu buttons disappear on click

Question

I'm trying to use the meteor ionic lib (https://github.com/meteoric/meteor-ionic) for my application. I figured out how to add the left side menu. But whenever I navigate to another page, the upper left nav button and center title disappear. Those buttons only appear for a fresh load of the index page. I can pull the menu out if I drag all the way from the edge of the browser. A

Here is the 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>

score 0 · Answer 1 · answered Apr 25 '15 at 16:20

According to Meteoric ionNavBar the "headerButtonLeft", "headerTitle" and "headerButtonRight" are components of ionNavBar.

I suggest you set these after the ionNavBar is created by setting these components for each template:

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

Meteor-Ionic: Sidemenu buttons disappear on click

1 Answers1