イオンフレームワークのSidemenus

Question

これはangularjsの私のファイルです。私はsidemenusのコードを挿入することができません。そのコードを含めると、イオン・ナビゲーション・ビューのスタイルが変わり、ページは空白になります。 Plsはメニューを挿入する正確な場所を知るのに役立ちます。

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