Sidemenus在離子框架

Question

這是我在angularjs中的文件。我無法插入sidemenus的代碼。如果我包含該代碼，則ion-nav-view的樣式會發生變化，並且頁面爲空白。請幫助我瞭解我應該插入菜單的確切位置。

<ion-nav-view class="dashboard_pane"> 

     <ion-header-bar class="bar-positive"> 

      <button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button> 
      <h1 class="title">DASHBOARD</h1> 
      <button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button> 

     </ion-header-bar> 

     <ion-content padding="true" > 


       <div class="row"> 
        <div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div> 
        <div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div> 
       </div> 

</ion-content> 
    </ion-nav-view> 
<div class="bar bar-footer bar-light" style='background-image:url(../img/advertisement_button.png);background-size:cover;width:100%;height:8%;'></div> 
     </body> 

---

是頭部分罰款？

<ion-header-bar class="bar-positive"> 
      <button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button> 
      <h1 class="title">DASHBOARD</h1> 
      <button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button> 
    </ion-header-bar> 

    </ion-nav-bar> 

Answer 1

創建離子側菜單，你必須使用<ion-side-menus>指令父指令。裏面你有使用2指令（3條指令，如果你同時使用右側和左側菜單）： 一個用於主體內容<ion-side-menu-content>正文或<ion-nav-view>將去這裏。 另一個左/右鍵菜單：<ion-side-menu side="left"> 示例代碼：

<ion-side-menus> 
    <ion-side-menu-content> 
     <ion-nav-bar class="bar-positive header-color"> 
     <!-- Header title and back button codes--> 
     </ion-nav-bar> 

     <ion-nav-view animation="slide-ios"> 
     <!-- Main body content will go here --> 
     </ion-nav-view> 

    </ion-side-menu-content> 

    <ion-side-menu side="left" enable-menu-with-back-views="false" width="290"> 
     <ion-content has-header="false"> 

     <!-- Left menu code will go here--> 
     <!-- You can also create a separate html file for left menu and include like this --> 
     <div ng-include src="'templates/left-menu.html'"></div> 

     </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

Answer 2

<ion-side-menus> 
    <ion-side-menu-content> 
     <ion-nav-bar class="bar-positive header-color"> 
     <!-- Header title and back button codes--> 
     </ion-nav-bar> 

     <ion-nav-view animation="slide-ios" class="dashboard_pane"> 
     <!-- Main body content will go here --> 

     <ion-header-bar class="bar-positive"> 
       <button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button> 
       <h1 class="title">DASHBOARD</h1> 
       <button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button> 
     </ion-header-bar> 
     <ion-content padding="true" > 
       <div class="row"> 
         <div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div> 
         <div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div> 
        </div> 
     </ion-content> 
    </ion-nav-view> 

    </ion-side-menu-content> 

    <ion-side-menu side="left" enable-menu-with-back-views="false" width="290"> 
     <ion-content has-header="false"> 

     <!-- Left menu code will go here--> 
     <!-- You can also create a separate html file for left menu and include like this --> 
     <!--<div ng-include src="'menu.html'"></div> --> 
     **<ion-list> 
     <ion-item nav-clear menu-close href="#/app/search"> 
      Search 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/browse"> 
      Browse 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/playlists"> 
      Playlists 
     </ion-item> 
     </ion-list>** 


     </ion-content> 
    </ion-side-menu> 
</ion-side-menus>