javascript - ionic : How to add custom elements to header bar or add own header bar per view?

Question

我是 Ionic 的新手。我想将自定义项目添加到标题栏。

标题栏似乎是由 ion-nav-bar 元素内的框架生成的。

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

我明白了，选项卡模板中的 View 标题会自动放入标题栏中。

<ion-view view-title="Home">

这是我正在处理的代码:https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview 这取自 ionic 文档:http://ionicframework.com/docs/api/directive/ionTabs/

header-bar 文档说，要在 ion-content 元素之前添加 header bar 元素(请参阅主页模板)，但它不会显示。

<ion-view view-title="Home">
  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Custom Header</h1>
  </ion-header-bar>
  <ion-content class="padding">
    <p>
      <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
    </p>
  </ion-content>
</ion-view>

如何根据当前显示的选项卡将自己的元素添加到标题栏，或者在每个模板中都有一个标题栏？

Answer 1

经过更多搜索，我发现了这个:http://codepen.io/calendee/pen/hIkoJ

看起来，我必须在我的模板中添加一个 ion-nav-bar:

<ion-view view-title="Home">
  <ion-nav-bar class="bar-positive" align-title="center">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
    <ion-nav-buttons side="right">
      <button class="button" ng-click="baz()">
        RightButton!
      </button>
    </ion-nav-buttons>

  </ion-nav-bar>
  <ion-content class="padding">
    <p>{{lol}}

更新的 plnkr:https://plnkr.co/edit/33YSRvp2H92dbeliEaj6?p=preview