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

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}}}”。

当我在浏览器中查看数据源网址时，我看到以下内容：

{

"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 个解决方案

解决方案1
2 已采纳 2015-05-15 20:53:49

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-05-15 20:53:49

解决方案1
2 已采纳 2015-05-15 20:53:49