Question

我是AngularJS的新手，想要开始从远程源检索数据。

我的app.js文件如下所示：

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

app.controller('ClubController', ['$http', function($http){

    var club = this;
    club.team = [];

    $http.get('http://api.football-data.org/teams/19').success(function(data){
        club.team = data;
    });
}]);

我的html看起来像这样：

<!doctype html>
<html ng-app="footy">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>

  <div ng-controller = "ClubController as data">
    {{data.club.team.name}}
  </div>
</body>
</html>

当我在浏览器中查看页面时，所有返回的页面都是空白页面，在源代码中我可以在div之间看到“{{data.club.team.name}}”。

当我在浏览器中查看数据源Url时，我看到了：

{

"id": 19,
"name": "Eintracht Frankfurt",
"shortName": "Eintr. Frankfurt",
"crestUrl": "http://upload.wikimedia.org/wikipedia/commons/0/04/Eintracht_Frankfurt_Logo.svg"
}

我已经完成了这个课程：http://campus.codeschool.com/courses/shaping-up-with-angular-js/并试图将第5章中关于服务的说明应用于此但我没有运气。

有人可以帮忙吗？提前致谢。

Answer 1

我在这里看到两个问题：

http://api.football-data.org/teams/19不允许使用CORS。您无法加载数据。 更新： OP指出他/她有一个允许CORS的API密钥。这不是问题，但可能是其他人试图重现这一点。
{{data.club.team.name}}应为{{data.team.name}}，因为您说var club = this;。换句话说，别名为data的控制器与club对象相同。 club对象不是控制器数据的属性，它是控制器的数据。

请参阅此plnkr进行演示。由于api密钥，注释掉的代码不起作用，本地托管的文件执行：http://plnkr.co/edit/ItD96Zfk0g1cLyGrrgBy?p=preview

AngularJS：使用$ http.get检索数据并使其可用

1 个答案: