Question

<ion-view>
  <div ng-if="showHeader">
    <ion-header-bar class="bar bar-header navbar-fixed-top">
      <div class="row">
        <div>
        <span class="navbar-brand" href="#">
          //data
        </span>
        </div>

        <div class="button button-icon" ng-click="">
          //button
        </div>
      </div>
    </ion-header-bar>
  </div>
  <div id="customSubHeader">
    //content
  </div>
  <ion-nav-view name="PageView"></ion-nav-view>
</ion-view>

我尝试用

替换它

<div ng-if="showHeader">
  <ion-side-menus>
   <ion-side-menu-content>
<ion-header-bar class="bar bar-header navbar-fixed-top">
<div class="row">
           <div>
            //data
                </div>

     <div class="button button-icon topPull" ng-click="toggleTopMenu()">
      //button
 </div>
</div>
</ion-header-bar>
</ion-side-menu-content>
            <ion-side-menu side="left">
              <h2 style="margin-top:80px;">Side Menu</h2 > 
            </ion-side-menu>
        </ion-side-menus>



</div>

但没有帮助。

如何在<ion-header-bar></ion-header-bar>中集成离子侧菜单？我不认为我现在可以用导航栏替换标题栏，并且ion-side-menu中的标题栏不会显示任何内容。

Answer 1

你必须创建类似这样的菜单状态

    $stateProvider.state('menu', {
        url: '/menu',
        abstract: true,
        templateUrl: 'templates/menu.html'
    });

你的menu.html文件会有类似这样的标题

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
         <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
<ion-side-menu side="left">
    <ion-content class="list-black">
        <ion-list>
            <ion-item class="background-black" menu-close href="#/menu/home">
               Home
            </ion-item>
        ........
        .......
        </ion-list>
    </ion-content>
</ion-side-menu>

然后你的模板页面会是这样的

    <ion-header-bar class="header-black">
    <button class="button button-icon button-clear" menu-toggle="left"><i class="icon-icon-hamburger icon-white"></i></button>
    <h1 class="title light header-title">App header for home page</h1>
    <div class="buttons" side="left">
        <button class="button button-clear button-light" ng-click="toggleLayout()">                
            <i ng-show="layoutOptions.value == 'grid'" class="icon-icon-list icon-white icon-36"></i>
            <i ng-show="layoutOptions.value == 'list'" class="ion-android-apps icon-white icon-30"></i>                
        </button>            
        <button class="button button-clear button-light"><i class="icon-icon-notification icon-white icon-30"></i></button> <span class="badge badge-assertive">13</span>
    </div>
</ion-header-bar>    
<ion-content ng-show="layoutOptions.value == 'grid'">
.....
....

使用离子侧菜单和Ionic标题

1 个答案: