Angular $ http请求不返回Rails资源

Question

I'd like to get a JSON object of all the posts in my database.

Here's the module:

angular
.module('AngularRails', [
    'ngRoute',
    'templates'
    ]).config(function($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'home.html',
            controller: 'HomeCtrl'
          });
    });

A controller:

angular.module('AngularRails')
  .controller('PostsController', function($scope, $http) {
    var posts = $http.get('/posts.json').success(function(data){
      return data;
    });

    $scope.posts = posts;
  });

The view:

<h1>The Home View!</h1>

<ul>
  <li ng-repeat='post in posts'>
    {{ post.title }}
  </li>
</ul>

When I check the console, I can see that the request is made to the specified URL (and can see the JSON I want), but it's buried deeply within some large object.

How can I display the posts in an unordered list?

Edit

As per Dan's suggestion, I've changed the controller to this:

angular.module('AngularRails')
  .controller('PostsController', function($scope, $http) {
    $http.get('/posts.json').success(function(data) {
      $scope.posts = data;
    });
  });

No cigar.

Answer 1

The data you are looking for will be passed as a parameter to the success callback from $http . $scope.posts in your example is the entire http object. Try something like this:

angular.module('AngularRails').controller('PostsController', function($scope, $http) {
    $http.get('/posts.json').success(function(postData, status, headers, config){
        $scope.posts = postData; // this is the JSON from the web request
    });

    // $scope.posts = posts; <-- this was the $http promise object
});

Example

Rails controller:

def list
  posts = { posts: %w(post1 post2 post3 post4) } # Or ActiveRecord query etc...

  respond_to do |format|
    format.json { render json: posts }
  end
end

Angualr controller:

$http.get('http://localhost:3000/posts/list.json').success (data) ->
    $scope.posts = data.posts
    console.log $scope.posts // ["post1", "post2", "post3", "post4"]