Navigator not working if sliding-menu is added to page Onsen UI

Question

I recently added a sliding-menu to one of my PhoneGap mobile apps, and now all the page-changes that depended on the myNavigator.ResetToPage('htmlpage.html') function stopped working.

The sliding menu hosts only a couple of auxiliary views that are not that important.

Here's a sketch of the index.html file

<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('main.html', {closeMenu: true})">
      Home
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('my_stuff.html', {closeMenu: true})">
      My Stuff
    </ons-list-item>
  </ons-list>
</ons-template>


<ons-template id="main.html">
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page ng-controller="AppController" id="main">
            <ons-tabbar>
                <ons-tab active="true" page="page1.html">
                    <div class="tab">
                        <ons-icon icon="ion-calendar" class="tab-icon"></ons-icon>
                        <div class="tab-label">Page 1</div>
                    </div>
                </ons-tab>
                <ons-tab page="page2.html">
                    <div class="tab">
                        <ons-icon icon="ion-checkmark" class="tab-icon"></ons-icon>
                        <div class="tab-label">Page 2</div>
                    </div>
                </ons-tab>
                <ons-tab page="settings.html">
                    <div class="tab">
                        <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
                        <div class="tab-label">Settings</div>
                    </div>
                </ons-tab>
            </ons-tabbar>
        </ons-page>
    </ons-navigator>
</ons-template>


<ons-template id="settings.html">
    <ons-page id="settings">
        <ons-toolbar style="background-color:#222;">
            <div class="center" style="color: white">Settings</div>
        </ons-toolbar>
        A HELP BUTTON WITH ng-click="navigateHelp()"
        AN ABOUT BUTTON WITH ng-click="navigateAbout()"
    </ons-page>
</ons-template>

Is there any connection between the sliding-menu and the navigator, that made the navigator to stop working?

Answer 1

When you use setMainPage you are changing ons-sliding-menu 's content. ons-navigator is part of the content that you change, so if you load settings.html page with setMainPage you won't have navigator there (it's only inside main.html ).

Stop using menu.setMainPage and use always ons-navigator methods. The equivalent would be myNavigator.resetToPage(...) :

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('main.html'); menu.close();">
      Home
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('my_stuff.html'); menu.close();">
      My Stuff
    </ons-list-item>
  </ons-list>
</ons-template>

This way you maintain the menu content, ie the navigator, and only change navigator's content.