ionic:如何向标题栏添加自定义元素或为每个视图添加自己的标题栏？

Question

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

看来标题栏是由ion-nav-bar元素内的框架生成的.

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

我看到,标签模板中的视图标题会自动放入标题栏.

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

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

标题栏文档说,要在ion-content元素之前添加标题栏元素(请参阅主页模板),但它不会显示.

<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-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