How to position multiple species in ionic

Question

I am trying to use the ionic Framework to create a content menu that consists of two parts coming from different controllers. I indicated them as view: menuContent and view: menuSubcontent below.

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>" } } }) 

When the page is displayed, <ion-nav-view name="menuSubcontent"> not displayed, although it is in the DOM. I added some CSS properties to make it visible:

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

I was wondering if this is the right approach (adding my own css classes to menuSubcontent) or if there is a systematic way to use a framework that brings out guesswork into positioning with multiple views. I am still learning how to use this infrastructure.

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' } } }); 

Define your template as abstract in your routes: Sources: http://codepen.io/ionic/pen/vqhzt

Answer 2

If you save multiple pages on one page, you need to configure as shown below,

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

Thus, based on url, the corresponding view will receive rendering,

Otherwise, you can create a separate state for each view, as shown below,

 .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' } } }) 

So, the first state belongs to the login menu, and the second belongs to the main menu.

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> 

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

So, you can configure the state as follows.

Hope this helps you.