Onsen-UI 使用带有导航器的滑动菜单

Question

好的，问题是我有一个带页面的滑动菜单。现在我的一个页面有一个 ons-list。通过单击 ons-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>

Answer 1

您可以将<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's blog 您有一个教程，其中许多 ons 元素以类似的方式组合在一起。希望对您有所帮助！