Onsen-UI с использованием скользящего меню с навигатором

Хорошо, проблема в том, что у меня есть рабочее скользящее меню со страницами. Теперь одна из моих страниц имеет список ons. Нажимая на on-list-item, я хочу перейти на новую страницу с помощью кнопки «Назад». Я искал везде, но не нашел подходящего решения моей проблемы. Вот мой код.

<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> 

    Вы можете использовать <ons-navigator> как дочерний элемент вашего <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')"> ... 

    Работая здесь: http://codepen.io/frankdiox/pen/qEyvxB В любом случае, вы должны заботиться о стеке страниц. Если вы нажмете страницу, но вы «вернетесь», используя меню вместо кнопки «Назад», созданная страница останется в стеке.

    В случае, если вас интересует, в блоге Onsen UI у вас есть учебник, в котором многие элементы объединены аналогичным образом. Надеюсь, поможет!