Navigator ile sürgülü menüyü kullanarak Onsen-UI

Question

Tamam, Sorun şu ki sayfaları olan bir kayan menü var. Şimdi sayfamdan birinin bir liste listesi var. Liste-liste-öğesini tıklayarak geri düğmesiyle yeni bir sayfaya gitmek istiyorum. Her yerde aradım ama sorunuma uygun bir çözüm bulamadım. İşte benim kodum.

<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

listenize <ons-sliding-menu> bir çocuk olarak bir <ons-navigator> kullanabilirsiniz:

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

burada çalışma: http://codepen.io/frankdiox/pen/qEyvxB Neyse, sayfa yığının bu götürmelidir bakım yapıyor. Bir sayfayı zorlarsanız ancak geri düğmesi yerine menüyü kullanarak "geri dönersiniz", oluşturulan sayfa yığında kalacaktır.

İlgilendiğiniz durumda, Onsen UI's blog'da, birçok ons ​​öğesinin benzer şekilde birleştirildiği bir eğitmeniniz var. Umarım yardımcı olur!