CODEWITHSUNDEEP
angularjsionic-framework
AppTest
AppTest

Reputation: 501

Display title of current page in ionic side menu header

I have the following code for a side menu in the body of my index.html which works. But I can't figure out how to change the Page Title to display the title of the current page.

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-view class="has-header"></ion-nav-view>
        <ion-header-bar class="bar-dark">
            <div class="buttons">
                <button class="button icon button-clear ion-navicon-round"
                        ng-click="toggleLeft()"></button>
            </div>
            <h1 class="title">Page Title</h1>
        </ion-header-bar>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-list>
            <ion-item href="#/dash">Dashboard</ion-item>
        </ion-list>
        <ion-list>
            <ion-item href="#/search">Search</ion-item>
        </ion-list>
    </ion-side-menu>
</ion-side-menus>

NOTE: Use Shrinath's answer and place your content in a <ion-content> tag after the ion-header-bar tag to stop the content being stacked under the header.

Upvotes: 2

Views: 1190

Answers (1)

Shrinath
Shrinath

Reputation: 362

You can use route and for every route define template having different controller.
On Template definition you can choose different Header.

<ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Heading</h1>
      </ion-header-bar>

Upvotes: 2

Related Questions