How to add back-button and change title of ion-header-bar in template?

ionic-v1
1

I’m looking for any way to add back-button and change title of ion-header-bar in templates. I have some templates and when I open any template I want to change title and and add back-button. I’m trying add the tag ion-header-bar inside a template, but it are ignored when show the template.

How could I do this ?

My templates are: login.html and add.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

    <!-- controllers -->
    <script src="js/controllers/MainCtrl.js"></script>

    <!--directives-->
    


  </head>
  <body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">

    <ion-pane>      
      <ion-header-bar class="bar-stable">
        <h1 class="title">First Page</h1>
      </ion-header-bar>
      <ion-nav-view>            
      </ion-nav-view>
    </ion-pane>


  </body>
</html>

template login.html

<ion-view>

  <ion-header-bar align-title="left" class="bar-positive">
    <div class="buttons">
      <button class="button">Left Button</button>
    </div>
    <h1 class="title">Login</h1>    
  </ion-header-bar>

  <ion-content>  
      <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="Username" ng-model="data.username">
            </label>
            <br/>
            <label class="item item-input">
                <input type="password" placeholder="Password" ng-model="data.password">
            </label>
      </div>
      <button class="button button-block button-energized" ng-click="login()">Login</button>
  </ion-content>
</ion-view>
2

If you want to automatically add a back button use ion-nav-bar instead of ion-header-bar
http://ionicframework.com/docs/api/directive/ionNavBar/

put your content in ion-nav-view and ion-view --> so your base layout looks like this:
http://ionicframework.com/docs/api/directive/ionView/

After that you can set the title in your ion-view like this:
http://ionicframework.com/docs/api/directive/ionNavTitle/

There are two other directives to change the navbar within an ion-view:
http://ionicframework.com/docs/api/directive/ionNavBackButton/
http://ionicframework.com/docs/api/directive/ionNavButtons/

3 Likes
3

@bengtler thanks a lot !