在Angular.js中访问9gag API

Accessing 9gag API in Angular.js

本文关键字：9gag API 访问 Angular js      更新时间：2023-09-26

我正在制作一个简单的angular/rails应用程序作为9gag查看器，只是为了练习。我正在使用非官方的api，它似乎工作。我设置了rails应用，rails只是服务于angular。我可以在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数据，我很确定我唯一做错的就是没有给angular正确的终点。任何帮助都会很感激。

没有正确读取源数据对象

返回

{
  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>
演示

相关文章：