javascript - ng-repeat渲染空li元素

我正在使用ng-repeat遍历烂番茄api并显示电影标题。这是我的代码

JS：

var app = angular.module('app', []);

app.controller('ApiCtrl', function($http){
var app = this;
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$http.get(url+key)

.success(function(data) {
  app.movies = data;
  console.log(data);
 })
})

HTML：
    

<li ng-repeat="movie in app.movies">
    {{movie.title}}
</li>

</body>

这将在屏幕上输出3个空白li元素，如果我仅调用{{movie}}，则将输出整个对象，因此我知道绑定是正确的。

JSON的示例：

"movies": [
{
  "id": "771315918",
  "title": "Divergent",
}]

最佳答案

您的$ scope在哪里？

尝试类似的东西：

var app = angular.module('app', []);

app.controller('ApiCtrl', function($scope, $http){
var url = "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json"
var key = "?apikey=myKey"

$scope.movies = $http.get(url+key);

我不确定上面的代码是否可以在$ http下工作。我的建议是，在尝试从服务器获取数据之前，请先使所有有角度的东西都起作用。例如，如下定义$ scope.movi​​es：

$scope .movies =  [
    {
      "id": "771315918",
      "title": "Divergent",
    }
];

首先让它工作。