如何在離子框架中製作嵌套的菜單？

Question

嗨那裏我想在側面菜單中添加一個嵌套的菜單。

例如，請檢查：

http://codepen.io/ionic/pen/QwamEW

當我點擊菜單項，新頁面（新形式）將打開。

但是我想在側面菜單中打開該頁面...而不是在新頁面中！

這是一箇舊的例子，不適用於新版本。

`http://codepen.io/mhartington/pen/mFGfj` 

有人能幫我做到嗎？

Answer 1

有一個例子in this Codepen與離子nightlies一起使用。滑動屏幕左側以顯示菜單。

它的工作原理採用<ion-pane>內<ion-side-menus>：

<ion-side-menus> 
    <!-- Center content --> 
    <ion-pane ion-side-menu-content> 
     <header class="bar bar-header bar-dark"> 
      <button class="button button-icon" ng-click="toggleCategories()"> 
       <i class="icon ion-navicon"></i> 
      </button> 
      <h1 class="title">Nested categories</h1> 
     </header> 
     <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-pane> 
</ion-side-menus> 

我想你可以輕鬆地適應您的特定需求。

Answer 2

嗨你的答案在codepen。 （多級側菜單） http://codepen.io/anon/pen/bdYGJm

<script id="templates/tabs.html" type="text/ng-template"> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 

    <ion-tab title="Home" icon="ion-home" href="#/tab/home"> 
     <ion-nav-view name="home-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> 
     <ion-nav-view name="about-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact"> 
     <ion-nav-view name="contact-tab"></ion-nav-view> 
    </ion-tab> 

    </ion-tabs> 
</script> 

<script id="templates/home.html" type="text/ng-template"> 
    <ion-view view-title="Home"> 
    <ion-content class="padding"> 
     <p> 
     <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> 
     </p> 
    </ion-content> 
    </ion-view> 
</script> 

<script id="templates/facts.html" type="text/ng-template"> 
    <ion-view view-title="Facts"> 
    <ion-content class="padding"> 
     <p>Banging your head against a wall uses 150 calories an hour.</p> 

     <p> 
     <a class="button icon ion-home" href="#/tab/home"> Home</a> 
     <a class="button icon icon-right ion-chevron-right" ui-sref="tabs.facts2.insights1({ ID: 1})">More Facts</a> 
     </p> 
    </ion-content> 
    </ion-view> 
</script> 

或 http://codepen.io/rajeshwarpatlolla/pen/JdOwEE