How use ion-header-bar with ion-tabs

ionic-v1
1

Hi.

I use ion-tabs, and i have in templates folder my tabs.html

<ion-tabs class="tabs-icon-left">

  <!-- First Tab -->
  <ion-tab title="First" icon="icon ion-icon" href="#/tab/first">
    <ion-nav-view name="tab-first"></ion-nav-view>
  </ion-tab>

  ...........
</ion-tabs>

Now i want to add a toggle button in the header.
I try with

<ion-header-bar align-title="center">
    <div class="buttons">

    </div>
    <h1 class="title">Title</h1>
    <div class="buttons">
        <label class="toggle">
            <input type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </div>
</ion-header-bar>


<ion-tabs class="tabs-icon-left">

  <!-- First Tab -->
  <ion-tab title="First" icon="icon ion-icon" href="#/tab/first">
    <ion-nav-view name="tab-first"></ion-nav-view>
  </ion-tab>

  ...........
</ion-tabs>

but i can’t change title, and i can’t hide the button.

My solution is

$(‘ion-header-bar .title’).html(“My Title”);
$(‘ion-header-bar .buttons’).hide();

but i think it’s not the right way.

Can you help me?
Bye.

2

I think you can change the header-bar anyway you want if you add one header bar for each tab page, I think this is a better solution. You separate the HTML just to create the layout you want and the JS for logic, you don’t make your JS code dirty trying to manipulate the HTML and directives with JS.