如何在侧边菜单中放置子标题？

Question

我们正在开发一个使用ngCordova并希望实现侧边菜单的应用程序。侧边菜单已经实现，如下所示。

添加子标题后，菜单如下所示：

这是我们的侧边菜单代码：

<ion-view title="Home" ng-app="app.controllers"  >
    <ion-header-bar class="bar bar-subheader bar-positive">
        <h1 class="title">Subheader</h1>
    </ion-header-bar>
    <ion-side-menus ng-controller="homeCtrl">

        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable nav-title-slide-ios7">
                <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-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>


        <ion-side-menu side="left" >

            <ion-header-bar class="bar-stable bar-dark">
                <h1 class="title">Category</h1>
            </ion-header-bar>

            <ion-list class="dark">
                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-ionic-outline ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="#/tab/home" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-home-outline"></i><span style="color:#666">Home</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-paw-outline"></i><span style="color:#666">Dogs</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-cog-outline"></i><span style="color:#666">Profile Settings</span>
                </ion-item>

                <ion-item nav-clear menu-close href="" class="item item-icon-left" >
                    <i class="icon ion-ios7-help ion-ios-checkmark-outline"></i><span style="color:#666">History Orders</span>
                </ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>
</ion-view>

我们希望子标题像菜单按钮一样左右移动，但它现在没有这样做。我该如何解决这个问题？

Answer 1

您正在侧面菜单的元素之外定义子标题，这就是为什么它不按照您希望的方式运行。您可以通过移动以下代码来解决此问题：

<ion-header-bar class="bar bar-subheader bar-positive">
  <h1 class="title">Subheader</h1>
</ion-header-bar>

致<ion-side-menu side="left>：

<ion-side-menu side="left">
  <ion-header-bar class="bar-stable bar-dark">
    <h1 class="title">Category</h1>
  </ion-header-bar>

  <ion-header-bar class="bar bar-subheader bar-positive">
    <h1 class="title">Subheader</h1>
  </ion-header-bar>