Добавление правого меню в ионном

Question

Привет, я новичок в ионной, кто-нибудь может мне помочь. Я покупаю шаблон от ionic для своего приложения и в настоящее время работаю с тем, что его шаблоны работают нормально, но проблема в том, что я хочу отобразить боковое меню с правой стороны на определенной странице, я сделал слишком много поиска, но не получил правильное решение. Ниже приведен код в allmediums.html Мне нужно отобразить chartmenu.html с правой стороны.

app.js

.state('app.mediums', { 
     url: "/{id:[a-zA-Z0-9]{1,24}}/{index:[a-zA-Z]{0,12}}", 
     views: { 
      'menuContent': { 
      templateUrl: 'templates/states/Allmediums.html', 
      controller: 'MediumsCtrl' 
      }, 
     'menuList': { 
      templateUrl: 'templates/chartsmenu.html' , 
      controller: 'MediumsCtrl' } 
     } 
     }) 

Все mediums.html

<ion-view class="home-page" > 
    <!--<ion-header-bar title="center" class="bar-stable"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     <h1 class="title logo-app">Categories</h1> 
     <button class="button button-icon button-clear ion-ios-plus-outline" ng-click="goDetail('new')"> 
     </button> 
    </ion-header-bar>--> 

    <ion-nav-title> 

     <span ng-if="key == ''">Print</span> 
     <span ng-if="key == 'web'">Web </span> 
     <span ng-if="key == 'social'">Social </span> 
     <span ng-if="key == 'tv'">Television </span> 
    </ion-nav-title > 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
    </ion-nav-buttons> 

    <ion-nav-buttons side="right"> 
    <!--<a ui-sref="app.right"> -->  
     <button class="button button-icon button-clear mdi mdi-chart-line" menu-toggle="right" > 

     <!-- <button class="button button-icon button-clear ion-ios-plus-outline" ng-click="goDetail('new')">--> 
     </button><!--</a>--> 
    </ion-nav-buttons> 

    <ion-content ng-controller="MediumsCtrl"> 


     <div class="list list-inset"> 
      <label class="item item-input"> 
       <i class="icon ion-search placeholder-icon"></i> 
       <input type="text" placeholder="Search"> 
      </label> 
     </div> 
<style> 
    .item-thumbnail-left .item-content {padding-left: 16px; } 
</style> 
     <!--print--> 
     <ion-list can-swipe="true" class="list-categories" ng-if="!key"> 
      <ion-item ng-repeat="item in store.categories" ng-click="goDetail(item._id)" class="item-thumbnail-left"> 
       <!--<img ng-src="{{item.image}}">--> 
       <!--<h2>{{item.name}}</h2> 
       <p class="not-dot">{{item.description}}</p>--> 
       <span class="bold">Name:</span> item.customerName <br/> 
       <span class="bold">Email:</span> item.customerEmail <br/> 
       <span class="bold">Phone:</span> item.customerPhone <br/> 
       <span class="bold">Address:</span> item.address <br/> 
       <span class="bold">Total:</span> item.total | currency <br/> 
       <span class="bold">Status:</span> 
       <span class="label label-primary" ng-if="!item.status">Pending</span> 
       <span class="label label-success" ng-if="item.status">Done</span> 
       <ion-option-button class="button-assertive" ng-click="removeCategory(item._id, $index)"> 
        Delete 
       </ion-option-button> 

      </ion-item> 
     </ion-list> 

<!--web--> 
     <ion-list can-swipe="true" class="list-categories" ng-if="key == 'web'"> 
      <ion-item ng-repeat="item in store.categories" ng-click="goDetail(item._id)" class="item-thumbnail-left"> 
       <!--<img ng-src="{{item.image}}">--> 
       <!--<h2>{{item.name}}</h2> 
       <p class="not-dot">{{item.description}}</p>--> 
       <span class="bold">Name:</span> webitem.customerName <br/> 
       <span class="bold">Email:</span> webitem.customerEmail <br/> 
       <span class="bold">Phone:</span> webitem.customerPhone <br/> 
       <span class="bold">Address:</span> webitem.address <br/> 
       <span class="bold">Total:</span> item.total | currency <br/> 
       <span class="bold">Status:</span> 
       <span class="label label-primary" ng-if="!item.status">Pending</span> 
       <span class="label label-success" ng-if="item.status">Done</span> 
       <ion-option-button class="button-assertive" ng-click="removeCategory(item._id, $index)"> 
        Delete 
       </ion-option-button> 

      </ion-item> 
     </ion-list> 
<!--social--> 

     <ion-list can-swipe="true" class="list-categories" ng-if="key == 'social'"> 
      <ion-item ng-repeat="item in store.categories" ng-click="goDetail(item._id)" class="item-thumbnail-left"> 
       <!--<img ng-src="{{item.image}}">--> 
       <!--<h2>{{item.name}}</h2> 
       <p class="not-dot">{{item.description}}</p>--> 
       <span class="bold">Name:</span> socialitem.customerName <br/> 
       <span class="bold">Email:</span> socialitem.customerEmail <br/> 
       <span class="bold">Phone:</span> socialitem.customerPhone <br/> 
       <span class="bold">Address:</span> socialitem.address <br/> 
       <span class="bold">Total:</span> item.total | currency <br/> 
       <span class="bold">Status:</span> 
       <span class="label label-primary" ng-if="!item.status">Pending</span> 
       <span class="label label-success" ng-if="item.status">Done</span> 
       <ion-option-button class="button-assertive" ng-click="removeCategory(item._id, $index)"> 
        Delete 
       </ion-option-button> 

      </ion-item> 
     </ion-list> 

<!--television--> 

     <ion-list can-swipe="true" class="list-categories" ng-if="key == 'tv'"> 
      <ion-item ng-repeat="item in store.categories" ng-click="goDetail(item._id)" class="item-thumbnail-left"> 
       <!--<img ng-src="{{item.image}}">--> 
       <!--<h2>{{item.name}}</h2> 
       <p class="not-dot">{{item.description}}</p>--> 
       <span class="bold">Name:</span> tvitem.customerName <br/> 
       <span class="bold">Email:</span> tvitem.customerEmail <br/> 
       <span class="bold">Phone:</span> tvitem.customerPhone <br/> 
       <span class="bold">Address:</span> tvitem.address <br/> 
       <span class="bold">Total:</span> item.total | currency <br/> 
       <span class="bold">Status:</span> 
       <span class="label label-primary" ng-if="!item.status">Pending</span> 
       <span class="label label-success" ng-if="item.status">Done</span> 
       <ion-option-button class="button-assertive" ng-click="removeCategory(item._id, $index)"> 
        Delete 
       </ion-option-button> 

      </ion-item> 
     </ion-list> 
    <!--close--> 
    <!--<ion-tabs class="tabs-positive tabs-icon-top"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 

    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 

    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 

    </ion-tab> 

</ion-tabs>--> 




    </ion-content> 
</ion-view> 
<ion-footer-bar> 
    <div class="tabs tabs-icon-top"> 
    <a class="tab-item " ui-sref="app.mediums({id:oneOrder._id,index:1})" on-select="selectTabWithIndex()"> 
     <i class="icon mdi mdi-newspaper positive"></i> 
     Print 
    </a> 
    <a class="tab-item " ui-sref="app.mediums({id:oneOrder._id,index:2})" on-select="selectTabWithIndex()"> 
     <i class="icon mdi mdi-web assertive"></i> 
     Web 
    </a> 
    <a class="tab-item " ui-sref="app.mediums({id:oneOrder._id,index:3})" on-select="selectTabWithIndex()"> 
     <i class="icon mdi mdi-facebook-messenger energized"></i> 
     Social 
    </a> 
    <a class="tab-item " ui-sref="app.mediums({id:oneOrder._id,index:4})" on-select="selectTabWithIndex()"> 
     <i class="icon mdi mdi-television royal"></i> 
     Television 
    </a> 
</div> 

    </ion-footer-bar> 

chartsmenu.html

<ion-side-menus > 
    <ion-side-menu-content> 
     <!--<ion-nav-bar class="bar-stable"> 
      <ion-nav-back-button> 
      </ion-nav-back-button> 

      <ion-nav-buttons side="left"> 
      <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
      </button> 
      </ion-nav-buttons> 
     </ion-nav-bar>--> 
     <ion-nav-bar class="bar-dark" align-title="center"> 
      <!--<ion-nav-back-button> 
      </ion-nav-back-button>--> 
     </ion-nav-bar> 
     <ion-nav-view name="menuContent" ></ion-nav-view> 
     <ion-footer-bar class="no-padding bar-dark" horizontal layout center center-justified ng-if="!myVar"> 
      <div flex class="padding-0-10"> 
       <!--<i class="ion ion-ios-cart-outline"></i> <span>{{data.order.items.length}}</span> items in your cart--> 
       2016 &copy; KAnalytics. 
      </div> 
      <div class="padding-0-10"> 
       <!-- <a ui-sref="app.visit"> 
        <i class="ion-android-globe icon-light"></i> 
       </a>--> 
       <a ui-sref="app.visit" class="button button-icon icon ion-android-globe"></a> 
      </div> 
     </ion-footer-bar> 
    </ion-side-menu-content> 

    <ion-side-menu side="right" > 
     <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar> 
     <ion-content > 

      <div class="list menu-sidebar" > 
       <a class="item item-icon-left" menu-close="" ui-sref="app.home" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Super Theme 
       </a> 

       <a class="item item-icon-left" menu-close ui-sref="app.dashboard" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Top Journalist 
       </a> 
       <a class="item item-icon-left" menu-close ui-sref="app.itemSummary" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Ranking 
       </a> 
       <a class="item item-icon-left" menu-close ui-sref="app.categories" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Publication Genre 
       </a> 
       <!--<a class="item item-icon-left" menu-close ui-sref="app.products" ui-sref-active="active"> 
        <i class="icon mdi mdi-format-list-bulleted"></i> 
        <span translate="PRODUCTS"></span> 
       </a> 
       <a class="item item-icon-left" menu-close ui-sref="app.orders" ui-sref-active="active"> 
        <i class="icon ion-ios-cart-outline"></i> 
        <span translate="ORDERS"></span> 
       </a>--> 
       <a class="item item-icon-left" menu-close ui-sref-active="active" ui-sref="app.notification"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Zone 
       </a> 

       <a class="item item-icon-left" menu-close ui-sref="app.setting" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Sentiments 
       </a> 
       <a class="item item-icon-left" menu-close ng-click="openModalClient()" ui-sref-active="active"> 
        <i class="icon mdi mdi-chart-bar"></i> 
        Spokesperson 
       </a> 

      </div> 
     </ion-content> 


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

Answer 1

Вы могли бы использовать в chartsmenu.html этот код:

<ion-side-menus> 
    <ion-pane ion-side-menu-content> 
     <ion-nav-bar class="bar-stable nav-title-slide-ios7" style='color:#fff;'> 
      <ion-nav-back-button class="button-clear" style='color:#fff;'> 
       <i class="icon ion-chevron-left"></i> 
      </ion-nav-back-button> 
     </ion-nav-bar> 
     <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view> 
    </ion-pane> 

    <ion-side-menu side="left" class="dark-bg"> 
     <ion-content> 
      //the content of menu here 
     </ion-content> 
    </ion-side-menu>  
</ion-side-menus> 

Answer 2

попробовать создать menu.html как общие, а не указывая на каждой странице // хороший код практике

<ion-side-menus> 

    <ion-side-menu-content> 
     <ion-nav-bar class="bar-dark"> 

     </ion-nav-bar> 

     <ion-nav-view name="appContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="side()"> -------------->// function to set side 
     <ion-header-bar class="bar-assertive"> 

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

и в controller.js

$scope.side=function(){ 
    if($ionicHistory.currentStatename() == "app.charts") 
{ 
return "right"; 
} 
else 
{ 
return "left"; 
} 
}