Onsen-UI za pomocą przesuwanego menu z nawigatorem

Question

Ok, Problem polega na tym, że mam działające menu przesuwne ze stronami. Teraz jedna z moich stron ma listę "on-list". Klikając na przycisk "lista-pozycji" chcę przejść do nowej strony z przyciskiem "Wstecz". Szukałem wszędzie, ale nie znalazłem żadnego właściwego rozwiązania mojego problemu. Oto mój kod.

<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

Można użyć <ons-navigator> jako dziecko swoimi <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')"> 
    ... 

Praca tutaj: http://codepen.io/frankdiox/pen/qEyvxB Zresztą robi to należy zadbać stosu stron. Jeśli naciśniesz stronę, ale "wrócisz" używając menu zamiast przycisku wstecz, utworzona strona pozostanie na stosie.

Jeśli jesteś zainteresowany, w Onsen UI's blog masz samouczek, w którym wiele elementów jest połączonych w podobny sposób. Mam nadzieję, że to pomoże!