Combining Onsen UI Sliding Menu with Navigation

Question

I am currently creating my first cordon app with onsen ui. It looks promising! But I ran into a problem that I could not solve, and I could not find the answer.

I hope this is a newbie and can be easily resolved by someone with a lot of experience with onsen.

I want to have a sliding menu and still have “normal” navigation on the main screen.

Two different approaches I've 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 as soon as I navigate from the first main page to another page, I cannot 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 Thus, the navigation element moves to the first main page. Result: I can navigate through the application (via pushPage in the controller), and I can open the menu from each page. But as soon as I click the link in the menu, any pushPage calls result in 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 using <ons-sliding-menu> in index.html. For example, your index will have the whole body:

 <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 navigation. Use

 <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 pages to end the trail. Use the navigator on the final 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> 

Going back. Just use ng-click="app.navi.popPage()" But as DTFagus said. Using a navigator is better for leaf pages.