Question

在通过FreeCodeCamp在CodeSchool上介绍Angular.js之后，我正在编写一个zipline，我必须在Camper News上使用Stylize Stories。基本上，我正在调用API并需要显示结果。

但是，我在使用angular.js显示API调用的结果时遇到了困难。我在网上和StackOverflow上搜索过，找不到解决问题的方法。

这是我的 app.js ：

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

  app.controller('StoryController', ['$http', function($http) {
    var story = this;
    story.news = [];
    $http.get('http://www.freecodecamp.com/news/hot').
    then(function(response) {
      story.news = response;
    }, function(err) {
      console.error('ERR', err);
    });
  }]);
})();

我的 HTML ：

<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>

我查看了控制台，我的电话正在返回一些内容，问题显然出现在我的HTML中，并且是由于我缺乏经验造成的。我会帮助找到解决方法或提示如何解决我的问题。

提前谢谢。

Answer 1

将then()与$http一起使用回调响应参数是一个比数据更复杂的对象...数据是该对象的属性：

$http.get('http://www.freecodecamp.com/news/hot').then(function(response) {    
  story.news = response.data;
}, function(err) {
  console.error('ERR', err);
});

Answer 2

您需要将<div id="posts" class="text-center" ng-repeat="new in story.news">更改为<div id="posts" class="text-center" ng-repeat="new in story.news.data">。

或者，您可以将控制器中的story.news = response;更改为story.news = response.data;

Answer 3

尝试在没有（function（）{}）（）

2.看起来你正在使用$ http.get来访问带有http ajax工具的api服务器，但你宁愿使用api客户端作为角度提供者的一部分。

$ resource是专为此类用法而设的提供商..

这是工厂文件（news.factory.js）

angular 
           .module('camperNews')
           .factory('$news',newsFactory);

//Injects strings to function dep.
newsFactory.$injector('$resource');

newsFactory($resource){

var baseUrl = 'http://www.freecodecamp.com/news';

return  
 $resource(baseUrl+'/hot', 
   {/*params dictionary*/},
     /*This is get/post/delete/put and so on customizations..*/
     {get: {method:'GET', params:{}, isArray:true /*i think you get a list..*/}
   );            
}

这是我的app.js：

  angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]);

  angular 
       .module('camperNews')
       .controller('StoryController', ['$news', function($news) {
    var story = this;
    story.news = [];

/*Will load a resource, with the array 
*and $resolved(bool) and $promise(promise type) and etc..
*/
    story.news = $news.get();
  }]);

我的HTML：

<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>

Answer 4

为什么不使用$ scope？而不是var story = this;写$ scope.story = {};和$ scope.story.news =响应;并写ng-controller =“statecontroller”。

Answer 5

在这种情况下，$ resource服务会更好 https://docs.angularjs.org/api/ngResource/service/ $ resource

使用Angular.js中API调用的数据

5 个答案: