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 clearer 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]}">
    <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>{{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.