AngularJS - (using Ionic framework) - data binding

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

This is the true solution: data bind the ion-nav-title directive

<ion-view>
  <ion-nav-title ng-bind="content.title"></ion-nav-title>
  <ion-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>
  </ion-content>
</ion-view>

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

Answer 3

I was encountering the same problem and was able to solve it by wrapping my title in double-curlies.

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

I should note that my page.title is being set statically by my controller rather than from a promise.

Answer 4

It's the first time that I worked with dynamic title in Ionic 1.7 and I run into this problem. So I solved using $ionicNavBarDelegate.title(') from the controller, as mentioned Kevin Gurden. But additionally, I used cache-view="false".

View:

<ion-view cache-view="false"></ion-view>

Controller:

angular
  .module('app', [])
  .controller('DemoCtrl', DemoCtrl);

  DemoCtrl.$inject = ['$ionicNavBarDelegate'];

  function DemoCtrl($ionicNavBarDelegate) {
    $ionicNavBarDelegate.title('Demo View');
  }

Answer 5

Use ion-nav-title instead of the directive view-title.
see http://ionicframework.com/docs/api/directive/ionNavTitle/

Answer 6

If you look at ionic view directive source on github, it's not watching on title attributes which means it won't update your view when you set a new value.

The directive is processed before you receive the answer from server and you fill $scope.content.title.

You should indeed use a promise in your service and call it in a resolver. That or submit a pull request to ionic.