在离子中添加右侧菜单

Question

您好，我是 ionic 新手，谁能帮帮我。我已经从 ionic 为我的应用程序购买了一个模板，目前正在使用该模板，它工作正常，但问题是我想在特定页面的右侧显示侧边菜单，我进行了太多搜索但没有得到正确的解决方案。下面是allmediums.html 中的代码，我必须在右侧显示chartsmenu.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' }
        }
      })

所有媒介.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";
}
}