ionic: Wie fügt man der Kopfleiste benutzerdefinierte Elemente hinzu oder fügt eigene Kopfleisten pro Ansicht hinzu?

Question

Ich bin neu in Ionic. Ich möchte benutzerdefinierte Elemente zur Überschriftsleiste hinzufügen.

Es scheint, als ob die Kopfzeile vom Framework innerhalb des ion-nav-bar-Elements generiert wird.

Ich sehe, dass der Ansichtstitel aus der Registerkarte Vorlage automatisch in die Kopfzeile eingefügt wird.

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

Hier ist der Code an dem ich arbeite: https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview Dieses von der ionischen Dokumentation entnommen: http://ionicframework.com/docs/api/directive/ionTabs/

Die Dokumentation Kopfleiste sagt, die Kopfleiste Element vor dem Ioneninhaltselement hinzufügen (siehe die Home-Vorlage), aber es wird nicht angezeigt.

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

Wie kann ich meine eigenen Elemente der Kopfleiste hinzufügen, je nach aktuell angezeigten Registerkarte oder eine in jedem Template Kopfleiste haben?

Answer 1

Nach mehr Suchen fand ich dies: http://codepen.io/calendee/pen/hIkoJ

Es sieht aus, als ob ich eine Ion-nav-Bar zu meiner Vorlage muss hinzufügen:

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

Aktualisiert plnkr: https://plnkr.co/edit/33YSRvp2H92dbeliEaj6?p=preview