Как сделать вложенное боковое меню в ионном каркасе?

Question

привет, я пытаюсь добавить вложенное меню в боковое меню.

, например, пожалуйста, проверьте следующее:

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

при нажатии пункта меню, новая страница (новая форма) откроется.

Но я хочу открыть эту страницу в боковом меню ... не на новой странице!

вот старый пример, который не работает с новой версией.

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

Может ли кто-нибудь помочь мне сделать это?

Answer 1

Есть пример in this Codepen, который работает с ионическими ночными. Пролистайте левую часть экрана, чтобы меню появилось.

Он работает с использованием <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

Привет, ваш ответ есть в кодефене. (Меню сбоку многоуровневый) 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