Back Button with text

Is it possible to display the title of the previous page next to the back button icon?

So for example:

[ '< title of previous screen'          'Title of current screen'      ]


Anyone know of a way to do this?

You can do this on your navbar : back-button-label="{{backTitle}}"

Then, in the controller do this : $scope. backTitle = 'Home'

To be honest, it doesn’t look very pretty

Doesn’t work for me unfortunately, the title of the previous screen doesn’t show, just the arrow.
I’m using this for my navbar:

<nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-label="{{backTitle}}" back-button-icon="icon icon-back"></nav-bar>

I’ve tried setting back-button-type to button-icon-label but that doesn’t seem to work either. I’m defining my nav-bar in index.html as per the ionic seed project. Does this only work when the nav bar is defined in a different place?

Hi @Calendee, just added a new issue about its style on GitHub :slight_smile:

Are you using the last version of Ionic? Have you set backTitle in the controller like @Calendee said? Maybe you haven’t set it; try replacing directly {{backTitle}} with Home to see if it works :slight_smile:

It does work when hard coding the value to Home. It just seems that any scope variable that is called in index.html is not displayed. The variable is displayed when I use it in a partial… Any way around this?

–Edit: or is this an issue with an out of date version of ionic? I used the ionic seed as a base for my app.

Well, make sure you’re using the last version of Ionic (0.9.19 Koala) and you’re using nav-view instead of view (check this updated guide). Then, if it won’t work, the reason could be an error in your controller.
If you’ll continue to see errors, feel free to create a plunkr or a jsfiddle of a schematic version of your app :slight_smile:

Ok, I’ve upgraded to the 0.9.19 version. But I can’t get it to work. As in the previous version of ionic, scope variables set in controller will not be picked up in nav-bar elements in index.html. They only seem to be picked up in <view> elements.

I’ve set up this Plunkr to demonstrate:

They must be picked up in <view> elemets 'cause the controllers are addressed to them.
If you want to use a controller to alter the backButton label, you should set a new controller to the <body> tag:

<body ng-controller="HomeCtrl">

You’ll see Manbearpig in this way :slight_smile:

1 Like