jak pozycjonować wiele widoków w ionic

Question

Próbuję użyć jonowego programu ramowego do zbudowania menu zawartości, które ma 2 części, pochodzące z różnych kontrolerów. Podałem je poniżej jako view: menuContent i view: menuSubcontent.

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

Gdy strona renderuje <ion-nav-view name="menuSubcontent"> nie jest widoczne, że chociaż w DOM. Dodałem kilka właściwości CSS, aby był on widoczny:

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

Zastanawiałem się, czy to jest właściwe podejście (dodawanie własnych klas CSS menuSubcontent) czy istnieje systematyczny sposób korzystania z ram, które wyjmuje zgadywanie w pozycjonowaniu z wieloma widokami. Nadal uczę się korzystać z tego schematu.

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

    }); 

Definiowanie szablonu jako streszczenie w swoich tras: Źródła: http://codepen.io/ionic/pen/vqhzt

Answer 2

Jeśli trzymać wielokrotność w samej stronie to musisz skonfigurować jak poniżej,

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

Więc na podstawie adresu URL odpowiedni widok zostanie wyświetlony,

W przeciwnym razie można utworzyć osobny stan dla każdego widoku, jak poniżej,

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

Więc pierwszy stan jest należący do menu logowania i drugi to należący do głównego 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> 

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

dzięki czemu można dostosować stan tak.

Mam nadzieję, że to pomoże.