आयनिक

Question

में एकाधिक दृश्यों को कैसे स्थानांतरित करें I सामग्री सामग्री बनाने के लिए आयनिक फ्रेमवर्क का उपयोग करने का प्रयास कर रहा हूं जिसमें विभिन्न नियंत्रकों से आने वाले 2 भाग हैं। मैंने उन्हें view: menuContent और view: menuSubcontent के रूप में निर्दिष्ट किया है।

एचटीएमएल

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

रूटर हालांकि यह डोम में है

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

जब पेज renders, <ion-nav-view name="menuSubcontent"> दिखाई नहीं देता है। मैं इसे दृश्यमान बनाने के लिए कुछ सीएसएस गुण कहा:

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

मैं अगर यह सही दृष्टिकोण (menuSubcontent को अपने खुद के सीएसएस वर्गों को जोड़ने) है या वहाँ ढांचे के बाहर अटकलबाजी लेता है का उपयोग करने का व्यवस्थित तरीका है सोच रहा था कई विचारों के साथ स्थिति में। मैं अभी भी सीख रहा हूं कि इस ढांचे का उपयोग कैसे करें।

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

तो यूआरएल के आधार पर http://codepen.io/ionic/pen/vqhzt

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

    }); 

अपने मार्गों में सार रूप में अपने टेम्पलेट को परिभाषित करें: सूत्रों का कहना है उपयुक्त दृश्य प्रस्तुत करेगा,

अन्यथा आप नीचे दिए गए प्रत्येक दृश्य के लिए अलग राज्य बना सकते हैं,

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

तो पहला राज्य है लॉगिन करने के लिए मेनू अंतर्गत आता है और दूसरा है मुख्य मेनू के अंतर्गत आता है।

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> 

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

तो तुम इस तरह राज्य अनुकूलित कर सकते हैं।

उम्मीद है कि यह आपकी मदद करता है।

Answer 2

आप एक ही पेज में कई रखना है तो आप नीचे की तरह कॉन्फ़िगर करने के लिए है,: