Combining Onsen UI sliding-menu with navigation

Question

I am currently building my first cordova app with onsen ui. Looks promising so far! But I ran into a problem I could not solve and I could not find the answer.

I hope it is a beginner question and can be solved easily by someone with more experience with onsen.

I want to have a sliding-menu and still the "usual" navigation on the main screen.

Two different approaches I tried:

1)

<ons-navigator var="app.navi">
    <ons-page>
        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
        </ons-sliding-menu>
    </ons-page>
</ons-navigator>

<ons-template id="menu.html">
    <ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html">
 <ons-page ng-controller="BooksCtrl">
      // Navigation in controller:
      app.navi.pushPage("new_action.html", {
            animation: "lift"
        });

  </ons-page>
</ons-template>

Result: No error messages. But once I navigate from the first main-page to another page I can't open the sliding menu. (Same as in the official demo found in github repo called navigator_sliding-menu)

2)

        <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
        </ons-sliding-menu>


<ons-template id="menu.html">
    <ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

        ...

    </ons-page>
</ons-template>

<ons-template id="page1.html">
 <ons-navigator animation="slide" var="app.navi">
 <ons-page ng-controller="BooksCtrl">
      // Navigation in controller:
      app.navi.pushPage("new_action.html", {
            animation: "lift"
        });

  </ons-page>
  </ons-navigator>
</ons-template>

Same as here: http://codepen.io/argelius/pen/ogXGeV So the navigation element is moved to the first main-page. Result: I can navigate through the app (via pushPage in controller) and I can open the menu from every page. But once I click a link in the menu any pushPage calls result in the error messages:

Uncaught TypeError: Cannot read property '$$phase' of null
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization.

Any ideas?

Thank you in advance

Answer 1

Try having the <ons-sliding-menu> in the index.html. For example have your your index would have the entire body of:

<ons-sliding-menu
    menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50">
  </ons-sliding-menu>

Then on your page1.html where you want to use the navigation. Use your

<ons-page modifier="menu-page">

        <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
          Continue last story
        </ons-list-item>

and finally if you want any end of trail pages. Use your navigator to the end page. v-page2.html-v

<ons-navigator var="app.navi">
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", {
        animation: "lift"
    })">
          Continue last story
        </ons-list-item>
<ons-navigator>

To return back. Just use a ng-click="app.navi.popPage()" But like DTFagus said. Using the navigator is better for end pages.