Onsen-UI sử dụng menu trượt với hoa tiêu

Question

Ok, Vấn đề là tôi có menu trượt hoạt động với các trang. Bây giờ một trong những trang của tôi có một danh sách. Bằng cách nhấp vào ons-list-item Tôi muốn điều hướng đến một trang mới với nút quay lại. Tôi đã tìm kiếm ở khắp mọi nơi nhưng không tìm thấy bất kỳ giải pháp thích hợp cho vấn đề của tôi. Đây là mã của tôi.

<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

Bạn có thể sử dụng một <ons-navigator> như một đứa trẻ của <ons-sliding-menu> của bạn:

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

Làm việc ở đây: http://codepen.io/frankdiox/pen/qEyvxB Dù sao, cách này, bạn nên chăm sóc của trang stack. Nếu bạn nhấn một trang nhưng bạn "quay lại" bằng cách sử dụng menu thay vì nút quay lại, trang được tạo sẽ vẫn còn trong ngăn xếp.

Trong trường hợp bạn quan tâm, trong Onsen UI's blog bạn có hướng dẫn trong đó nhiều yếu tố tiện ích được kết hợp theo cách tương tự. Hy vọng nó giúp!