覆盖默认标题并显示自定义按钮

时间:2015-08-22 18:34:34

标签: cordova ionic-framework ionic

这是我的index.html

  <body ng-app="mobApp">
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>

这是我的页面

<ion-view view-title="Update about">
<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
    <ion-content>
        <div class="list">        
          <label class="item item-input">
            <textarea placeholder="Write about yourself"></textarea>
          </label>
        </div>  
    </ion-content>
</ion-view>

此处内部标题没有左侧或右侧按钮显示其刚显示带标题的默认后退按钮。

1 个答案:

答案 0 :(得分:4)

您需要在hide-back-button="true"标记中添加<ion-view>以隐藏默认后退按钮。并添加如下导航按钮:

<ion-view view-title="Update about" hide-back-button="true">
    <ion-nav-buttons side="left">
        <button class="button" ng-click="doSomething()">Left Button</button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button">Right Button</button>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">        
          <label class="item item-input">
            <textarea placeholder="Write about yourself"></textarea>
          </label>
        </div>  
    </ion-content>
</ion-view>
相关问题