如何在离子侧菜单中使用相同的标题？答案

【问题标题】：How to use the same header with ion-side-menus?如何在离子侧菜单中使用相同的标题？
【发布时间】：2017-04-10 22:16:10
【问题描述】：

我正在使用 Ionic 1.3.2 创建一个应用程序，当用户从 Facebook 或应用程序选择您的登录类型时，我有一个步骤，在用户登录后，当有 @987654325 时，它将重定向到其他步骤@ 并且用户可以使用该应用程序。问题是我使用<ion-nav-bar> 创建了第一步（选择登录），并且在第二步（侧面菜单）中<ion-nav-bar> 的内容上也有<ion-nav-bar> <ion-side-menus> 并且第一步的标题似乎覆盖了第二步窃听的标题布局，我想在两个步骤中使用相同的标题。

我的问题是，我怎么能只使用一个标头，在这种情况下，标头是在第一步创建的，而第二步也使用这个标头？

我的场景如下图。

index.html（第一步）

<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

             <!-- The nav bar that will be updated as we navigate--> 
              <ion-nav-bar class="bar bar-header bar-assertive" align-title="center"> 
              </ion-nav-bar>

              <!-- where the initial view template will be rendered -->
              <ion-nav-view></ion-nav-view>

  </body>

main.html（第一步，用户选择您的登录类型）

  <ion-view view-title="MeuPedido" align-title="center">
    <ion-content>
      <div class="principal">

              <a class="button button-block button-positive" ng-click="fbLogin();">Login com Facebook</a>

              <button class="button button-block button-energized" ng-click="goTo('login');">
                  Entrar
              </button>
              <button class="button button-block button-energized" ng-click="goTo('addUsuario');">
                  Cadastrar
              </button>                       
        </div>
    </ion-content>
  </ion-view>

sidemenu.html（第二步，用户登录后）

<ion-side-menus ng-controller='CtrlSideMenu' data-ng-init="loadImage();">
  <!-- Center content -->
  <ion-side-menu-content>



    <!--app has header on index.html -->
      <ion-nav-bar class="bar-assertive">
      <ion-nav-back-button>        
      </ion-nav-back-button>
      <ion-nav-buttons side="left" class="has-header">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>       
    </ion-nav-bar> 



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

  <!-- Left menu -->
  <ion-side-menu side="left">
      <ion-header-bar>
      <div>
          <div class="row">
            <div class="col col-90 text-center">        
                <img ng-src="{{imageURL}}" class="round_image">
            </div>                 
          </div>
          <div class="row">
            <div class="col col-90 text-center customTitle">{{nome}}</div>
          </div>
      </div>
    </ion-header-bar>
    <ion-content style="margin-top:200px;">
      <ion-list>        
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>

    <ion-footer-bar class="bar bar-footer">
        <h6>Desenvolvido por Iguana Sistemas</h6>        
    </ion-footer-bar>

  </ion-side-menu>


</ion-side-menus>

这里是第一步的图片，看这里有标题

这里是第二步的图片，请注意第一步的标题覆盖了ion-side-menus 内的标题并破坏了布局。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

我并没有真正得到您想要实现的目标，但侧边菜单是一回事（它控制打开侧边菜单时出现的视图），而主视图是另一回事 - 是用户将看到的视图从这里您可以打开侧面菜单。您可以为这 2 个视图设置不同的导航栏。但从您的代码看来，您有 1 个主视图，用于登录用户，然后自行更改以显示提要和侧菜单。您有多种选择： 1. 使导航栏的标题和颜色可变，并用角度更改它们。 2.为第二步创建另一个视图并覆盖导航栏。你应该有一个类似这样的结构：-> 主视图（登录）->第二个视图（提要），它也有一个侧边菜单

【讨论】：