current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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

share|improve this question
    
Is it working when you're not using a service but filling $scope.content manually ? –  Florian F. Jan 21 at 12:37
    
... yes. So it must be something to do with the promise object? –  ericbae Jan 21 at 12:40
add comment

3 Answers 3

up vote 5 down vote accepted

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

share|improve this answer
add comment
up vote 4 down vote

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.

share|improve this answer
add comment
up vote 3 down vote

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.