在Angular.js中访问9gag API

Question

我正在作为9gag查看器制作一个简单的angular / rails应用程序，仅供练习。 我正在使用非官方的api ，它似乎可以工作。 我设置了rails应用程序，并且rails只是提供角度服务。 我可以只在一个javascript文件中调用api，它会吐出数据，所以我知道这部分工作。

当进入控制台时，我看到我输入的“成功”消息，因此唯一不起作用的代码是angular。 这是我到目前为止所拥有的；

app.js

window.App = angular.module('chadder', ['ngResource'])

hot_ctrl.js

App.controller('HotCtrl',['$scope', '$http', function($scope,$http){
  $scope.data = [];
  $http.get('http://infinigag.eu01.aws.af.cm/trending/0').success(function(data){
     console.log("success");
      return $scope.data = data;
    });
}]);

index.html.erb

<div class="container" ng-controller="HotCtrl" id="test">
  <div class="row" ng-repeat="hot in hot">
      <h2>{{ data.caption }}</h2>
      <p>{{ data.link }}</p>
  </div>
</div>

我使用的服务曾用于访问其他Rails api，但是由于出现的错误，我认为这只能让您访问本地的api（即localhost：3000 / api / something.json）。 我没有使用它，但是我确实做了设置。

hot.js

App.factory('Chadder', [
  '$resource', function($resource) {
    return $resource('http://infinigag.eu01.aws.af.cm/trending/0', []);
  }
]);

因为我看到了“成功”，并且可以在网页上看到API数据，所以我敢肯定，我做错的唯一一件事就是没有将正确的端点赋予角。 任何帮助，将不胜感激。

Answer 1

您没有正确读取源数据对象

返回为

{
  data: [/* array of objects */],
  paging :{} /*object*/
}

另外，您的ng-repeat毫无意义。 你有没有范围阵列hot重复。 然后，在ng-repeat您不是在引用创建的hot对象。

使用当前的范围设置您需要重复data.data

<div class="row" ng-repeat="hot in data.data">
      <h5>{{ hot.caption }}</h5>
      <p>{{ hot.link }}</p>
</div>

DEMO