Onsen-UI utilizzando il menu scorrevole con il navigatore

Question

Ok, il problema è che ho un menu scorrevole funzionante con pagine. Ora una delle mie pagine ha un elenco on-line. Facendo clic su ons-list-item voglio passare a una nuova pagina con il pulsante Indietro. Ho cercato ovunque ma non ho trovato alcuna soluzione adeguata al mio problema. Ecco il mio codice.

<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

È possibile utilizzare un <ons-navigator> come un bambino della vostra <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')"> 
    ... 

Lavorare qui: http://codepen.io/frankdiox/pen/qEyvxB In ogni caso, facendo questo si dovrebbe prendere cura della pila pagina. Se si preme una pagina ma si "torna indietro" utilizzando il menu anziché il pulsante Indietro, la pagina creata rimarrà nella pila.

Nel caso in cui sei interessato, in Onsen UI's blog hai un tutorial in cui molti elementi on sono combinati in modo simile. Spero che sia d'aiuto!