Onsen-UI using a sliding menu with a navigator

Question

Well, the problem is that I have a working sliding menu with pages. Now one of my pages has a list of ons. By clicking ons-list-item, I want to go to a new page using the back button. I searched everywhere, but did not find a suitable solution to my problem. Here is my code.

<ons-sliding-menu menu-page="menu.html" main-page="home.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-toolbar modifier="transparent"></ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})"> <ons-icon icon="fa-plus"></ons-icon> Home </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Browse Hotels </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Special Offers <div class="notification menu-notification">3</div> </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Blog </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Bookings </ons-list-item> <ons-list-item class="menu-item" ng-click="menu.setMainPage('hoteldetails.html', {closeMenu: true})"> <ons-icon icon="fa-bookmark"></ons-icon> Contact Us </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="home.html"> <ons-page ng-controller="homeController"> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Some App with sliding menu</div> <div class="right"> <ons-toolbar-button> <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> </ons-toolbar-button> </div> </ons-toolbar> <ons-list> <ons-list-item ng-click="Here I want to go to a whole new page"> Some list item </ons-list-item> </ons-list> </ons-page> </ons-template> 

Answer 1

You can use <ons-navigator> as a child of your <ons-sliding-menu> :

 <ons-template id="home.html"> <ons-navigator var="myNav"> <ons-page> <ons-toolbar> ... <ons-list-item ng-click="myNav.pushPage('newpage.html')"> ... 

Work here: http://codepen.io/frankdiox/pen/qEyvxB In any case, when doing this, you must take care of the page stack. If you click on the page, but you are "returned" using the menu instead of the "Back" button, the created page will remain on the stack.

In case you are interested, on the Onsen UI blog you have a tutorial in which many elements are combined in a similar way. Hope this helps!