$scope controller

Hi all, I am new to Ionic and I am trying to get the logo into the header title via:

my Js is:

angular.module('starter', ['ionic'])

.controller('myCtrl', function($scope) {

$scope.headerTitle = '<img src="img/logo.png" />';
});

Any ideas?

The view code is

<ion-view title="{{ headerTitle }}">

Are you using the latest version of Ionic (beta 14)? I have it working for beta 14 in this codepen: http://codepen.io/anon/pen/pvwRax

Maybe try using ion-nav-title:

<ion-view>
    <ion-nav-title>
        {{ headerTitle }}
    </ion-nav-title>
    ...

You can directly place html inside of ion-nav-title.

Thanks BrandyShea,

In the codepen, the logo jumps from centre to the back button position on the second screen.

And still no luck using this?

Although this works on each view:

http://ionicframework.com/docs/nightly/api/directive/ionNavTitle/

It jumps to the back button because the back button is showing the previous view’s title. I only placed it on that current view, which is why it doesn’t show on page 2.

ionNavTitle can also be placed in the ionNavBar if you want it to be on each view.

I’ve updated the codepen to reflect this, and also took away the previous title showing on the back button: http://codepen.io/anon/pen/pvwQba

Thanks BrandyShea,

all working now :smile:

1 Like