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

Issue

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)?

Solution

Here's a working example of how to accomplish this in Ionic. Open the menu, then click "About". When the "About" page transitions, you will see the title that was resolved.

As Florian noted, you need to use a service and resolve to get the desired effect. You then inject the returned result into the controller. There are some down sides to this. The state provider will not change the route until the promise is resolved. This means there may be a noticeable lag in the time the user tries to change location and the time it actually occurs.

http://plnkr.co/edit/p9b6SWZmBKWYm0FIKsXY?p=preview

Answered By - Justin Noel