Question

您好我是离子新手，任何人都可以帮助我。我已经从我的应用程序购买了离子模板，目前正在使用该模板，它正常工作但问题是我想在特定页面右侧显示侧面菜单我做了太多搜索但没有得到适当的解决方案。以下是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' }
        }
      })

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

尝试创建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";
}
}

Answer 2

您可以在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>

在离子中添加右侧菜单

2 个答案: