Is your Ionic View title not updating?

This post is more than 2 years old.

Ok, so I run into this once a month or so. I'm writing this just so I can - hopefully - remember it this time. This isn't a bug or anything in Ionic - but I'm wondering if it should be documented a bit more clearly for people like me. (AKA old dense people.)

Alright - so given an Ionic app where templates are a dynamic title, this is not going to work:


<ion-view title="{{film.title]}{% endraw %}">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
        <div>
            <p>The opening crawl would go here.</p>
        </div>
    </ion-content>
</ion-view>

Oddly - it will work sometimes - like if you happen to reload on that page itself - but not consistently. I'm sure there are Good(tm) reasons for this that make perfect sense, and I bet it revolves around Scope. I love Angular. Scope makes me want to push needles into my eyes though.

So how do you fix it? Switch to using <ion-nav-title>.


<ion-view>
    <ion-nav-title>{% raw %}{{film.title}}</ion-nav-title>
    <ion-content overflow-scroll="true" padding="true" class="has-header">
        <div>
            <p>The opening crawl would go here.</p>
        </div>
    </ion-content>
</ion-view>

As I said - this is documented. Kinda. The docs for ion-view say:

"A text-only title to display on the parent ionNavBar. For an HTML title, such as an image, see ionNavTitle instead."

But in my mind, {{film.title}} resolves to "Foo" which is text only, so it should work. I looked at the docs for ionNavTitle too and nothing there really seems to make it obvious. Maybe the ionView docs should have a callout/note/etc about this situation? Like I said - I swear I hit this once a month - but admittedly my memory is crap and I tend to repeat mistakes all the time.

Thoughts?

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Justin James posted on 1/7/2016 at 1:10 AM

Guess I have been lucky to not have gotten bit by this. Good info to know though. Going to add this to my list of things to remember.

Comment 2 by Cauê Almeida posted on 3/9/2016 at 2:51 PM

Simple and so useful. Thanksss

Comment 3 by webchi posted on 4/9/2016 at 10:58 PM

Thanks. Loose half an hour before found your post with how to fix this.

Comment 4 by obedm503 posted on 7/6/2016 at 3:32 AM

Great, solved my problem. Interestingly enough the view-title with a scope property worked fine when two views shared the same controller (like a list of films view, and a detail view for a clicked film). But for performance reasons I decided to give the details view it's own controller, and it broke. But this solved it. Thanks

Comment 5 by RagnarDanneskjöld posted on 7/16/2016 at 8:45 PM

Thanks for this, I wish it was a little better documented.

Comment 6 by rinogo posted on 9/12/2016 at 11:22 PM

Thank you so much! I burned several hours on this one... I chalked it up to my newb-level Angular/Ionic skills, but no matter what I tried (isolated scope, inherited scope, delays before setting the value, etc.), I couldn't get it to work reliably. The "delayed set" approach worked, but is obviously a huge hack. Good to know* it's just another quirk in the Angular/Ionic environment. (*I wish I understood what *exactly* was going on, though! Possible idea for a follow-up post, maybe?... :) )

Comment 7 (In reply to #6) by Raymond Camden posted on 9/13/2016 at 1:20 AM

You are most welcome.

Comment 8 by Trần Quốc Hoài (new 2015) posted on 2/3/2017 at 6:53 AM

i'm still checking your solution. Maybe it's working for my project. Thank you so much. If there is something happened i will inform with you. Thanks!

Comment 9 by Prafull agarwal posted on 4/21/2017 at 12:20 PM

We are also facing this issue and your above resolution don't works for me!!!
After lots of hours we find we add a extra template in same ionic HTML via script tag ng/template this causes blocker to ionic header updating.

Comment 10 (In reply to #9) by Cristiano posted on 4/22/2017 at 5:20 AM

Thanks.

Comment 11 by Danny Battison posted on 6/1/2017 at 1:13 PM

I've just come across this and you saved me a headache. Thanks!

Comment 12 (In reply to #11) by Raymond Camden posted on 6/1/2017 at 1:22 PM

You are most welcome.

Comment 13 by George Simon K posted on 6/13/2017 at 6:23 AM

Thank you very much for this post. This was helpful

Comment 14 by Gil Santos posted on 11/7/2017 at 1:04 AM

Very helpful. Thank you so much!