AngularJS - (using Ionic framework) - data binding on header title not working

Question

I'm using an AngularJS-based library called "Ionic" (http://ionicframework.com/).

This seems simple, but it isn't working for me.

In one of my views, I have the following

<view title="content.title">
  <content has-header="true" padding="true">
    <p>{{ content.description }}</p>
    <p><a class="button button-small icon ion-arrow-left-b" href="#/tab/pets"> Back to home</a></p>
  </content>
</view>

In the controller for the above view, I have

angular.module('App', []).controller('DetailCtrl', function($scope, $stateParams, MyService) {
  
  MyService.get($stateParams.petId).then(function(content) {
    $scope.content = content[0];
    console.log($scope.content.title); // this works!
  });
});

The data for this view is loaded via a simple HTTP GET service (called MyService).

The problem is that when I view this page,

<view title="content.title">

Doesn't display the title. It's just a blank. According to the Ionic documentation (http://ionicframework.com/docs/angularjs/controllers/view-state/), I think I'm doing the right thing.

It's strange that {{content.description}} part works, but content.title doesn't work?

Also, is it because I'm loading the content dynamically (via HTTP GET)?

Answer 1

By using the ion-nav-title directive (available since Ionic beta 14), the binding seems to work correctly.

Rather than

<ion-view title="{{content.title}}">
    ....

Do this

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

Works a treat.

Answer 2

A solution for newer versions of Ionic is to use the <ion-nav-title> element rather than the view-title property. Just bind your dynamic title inside the content of the <ion-nav-title> using curly brace syntax. Example:

<ion-view>
    <ion-nav-title>
      {{myViewTitle}}
    </ion-nav-title>
  <ion-content>
    <!-- content -->
  </ion-content>
</ion-view>