come posizionare più viste in ionico

Question

Sto cercando di utilizzare ionic Framework per creare un menu di contenuto che ha 2 parti, provenienti da diversi controller. Li ho specificati come view: menuContent e view: menuSubcontent di seguito.

HTML

<ion-side-menus> 
    <ion-side-menu-content> 
     <ion-nav-bar class="main bar-stable nav-title-slide-ios7"> 
      <ion-nav-back-button class="button-clear"><i class="icon"></i></ion-nav-back-button> 
     </ion-nav-bar> 

     <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view> 
     <ion-nav-view name="menuSubcontent"></ion-nav-view> 

    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
     <header class="bar bar-header bar-stable"> 
      <h1 class="title">Left</h1> 
     </header> 
     <ion-content class="has-header"> 
      <ion-list> 
       <ion-item nav-clear menu-close ng-click="login()"> 
        Login 
       </ion-item> 
       <ion-item nav-clear menu-close href="#/app/morestuff"> 
        etc. 
       </ion-item> 
      </ion-list> 
     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

ROUTER

.state('app.playlists', { 
    url: "/playlists", 
    views: { 
     'menuContent': { 
      templateUrl: "templates/playlists.html", 
      controller: 'PlaylistsCtrl' 
     }, 
     'menuSubcontent': { 
      template: "<span>subcontent of playlists</span>" 
      } 
     } 
    }) 

Quando il rendering della pagina, il <ion-nav-view name="menuSubcontent"> non è visibile anche se è nel DOM. Ho aggiunto alcune proprietà CSS per renderlo visibile:

z-index: 2 
margin-top: 400px; /* some arbit large number */ 

mi chiedevo se questo è l'approccio giusto (aggiungendo le mie classi CSS a menuSubcontent) o c'è modo sistematico di utilizzare il quadro che tira fuori la congetture nel posizionamento con più viste. Sto ancora imparando come usare questo framework.

Answer 1

<ion-side-menus ng-controller="SideMenuController"> 

    <!-- Header Changes --> 
    <ion-side-menu-content drag-content="false"> 
    <ion-nav-bar class="bar bar-header bar-positive"> 

     <!-- Open Sidebar Menu Start--> 
     <ion-nav-buttons side="left"> 
     <button class="button button-icon icon ion-navicon" menu-toggle="left"></button> 
     </ion-nav-buttons> 
     <!-- Open Sidebar Menu End --> 

     <ion-nav-back-button class="button-clear"> 
     <i class="ion-chevron-left"></i> Back 
     </ion-nav-back-button> 

     <!-- Open Sidebar Menu Start--> 
     <ion-nav-buttons side="right"> 
     <button class="button button-icon icon ion-refresh" ng-click="doRefresh()"></button> 
     </ion-nav-buttons> 
     <!-- Open Sidebar Menu End --> 

    </ion-nav-bar> 

    <ion-nav-view name="main" animation="slide-left-right"> 
    </ion-nav-view> 

    </ion-side-menu-content> 
    <!-- Header Changes --> 

    <!-- SideMenu Contents --> 
    <ion-side-menu side="left" class="light-bg dark-border"> 

    <header class="bar bar-header bar-light"> 
     <h1 class="title">Route Menu</h1> 
    </header> 

    <ion-content class="has-header"> 
     <div class="list"> 

     <a menu-close class="item item-icon-left" href="#/app/home"> 
      <i class="icon fa fa-bank fa-ionicon"></i> 
      Home 
     </a> 

    </ion-content> 
    <!-- SideMenu Contents --> 
    </ion-side-menu> 


</ion-side-menus> 



    //** abstract route for sidemenu 
    $stateProvider.state('app', { 
     url: '/app', 
     abstract: true, 
     templateUrl: 'templates/sidemenu.tpl.htm' 

    }); 

    //!** Home 
    $stateProvider.state('app.home', { 
     url: '/home', 
     views: { 
     'main': { 
      templateUrl: 'app/home/home.tpl.htm' 
     } 
     } 

    }); 

Definire il modello come astratta nei vostri percorsi: Fonti: http://codepen.io/ionic/pen/vqhzt

Answer 2

Se si mantiene più a stessa pagina, allora si deve configurare come qui di seguito,

<ion-tab title="Rooms" icon-off="ion-ios7-box-outline" icon-on="ion-ios7-box" href="#/tab/rooms"> 
    <ion-nav-view name="tab-rooms"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Chat" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes" href="#/tab/chat"> 
    <ion-nav-view name="tab-chat"></ion-nav-view> 
</ion-tab> 

Quindi, sulla base url la visualizzazione appropriata otterrà il rendering,

Altrimenti è possibile creare uno stato separato per ogni vista come di seguito,

.state('menuLogin', { 
url: '/menuLogin', 
abstract: true, 
templateUrl: 'templates/loginMenu.html' 

})

.state('menuMain', { 
url: '/menuMain', 
cache:false, 
abstract: true, 
templateUrl: 'templates/mainMenu.html' 
}) 

.state('menuLogin.login', { 
url: '/login', 
views: { 
    'menuContent': { 
    templateUrl: 'templates/login.html', 
    controller: 'LoginCtrl' 
    } 
} 
}) 

.state('menuMain.main', { 
url: '/main', 
views: { 
    'menuContent': { 
    templateUrl: 'templates/main.html', 
    controller: 'MainCtrl' 
    } 
} 
}) 

Quindi primo stato è appartiene al menu login e secondo è appartiene al menu principale.

Loginmenu.html:

<ion-nav-bar class="bar-positive" align-title="center"> 
<ion-nav-back-button class="no-text"> 
</ion-nav-back-button> 
</ion-nav-bar> 
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view> 

e Mainmenu.html:

<ion-nav-bar class="bar-positive" align-title="center" style="text-align:center;"> 
<ion-nav-back-button class="no-text"> 
</ion-nav-back-button> 
<ion-nav-buttons side="right"> 
<button class="button button-icon button-clear ion-navicon" menu-toggle="right"> 
</button> 
</ion-nav-buttons> 
</ion-nav-bar> 
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view> 

modo da poter personalizzare stato come questo.

Spero che questo ti aiuti.