Question

我正在尝试创建一个AngularJS应用程序，它将获取一个feed并重新格式化它，这样我就可以在博客上显示我在一个页面上写的博客的某些部分而没有一切。首先，我只是尝试将博客提取下来并显示帖子标题，我正在使用slashdot提要作为测试。

这是我的第一个角度项目，所以我环顾四周寻找类似于模板的东西，发现：http://www.jdev.it/a-very-simple-rss-reader-with-angularjs-and-google-feed-api/

JS：

var feedList = [];
var app = angular.module('FeedReader',['ngResource']);

app.factory('feedLoader',['$resource', function($resource){
    var googleAPI = $resource('http://ajax.googleapis.com/ajax/services/feed/load',{},{ collect: { method: 'JSONP', params: { v: '1.0', callback: 'JSON_Callback' } } });
    return googleAPI;
}]);

app.service('createFeedList',['feedLoader', function(feedLoader){
    this.get = function(){
        var feed = {
            feedName: 'Slashdot',
            feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
        };

        feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
            var results = data.responseData.feed;
            feedList.push(results); 
        });
    };

    return feedList;
}])

app.controller('blogCtrl',['$scope','createFeedList', function($scope, createFeedList){
    createFeedList.get;
    this.feedList = feedList;
}]);

HTML：

<html ng-app="FeedReader">
<head>
    <meta charset="UTF-8">
    <title>Reader Trial</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
</head>

<body ng-controller="blogCtrl">
    <ul>
        <li ng-repeat="list in feedList">{{list.title}}</li>
    </ul>

    <script src="./feedReader.js"></script>
</body>
</html>

关于为什么我没有填充我的feedList数组的任何想法？/没有输出

编辑 - 我为此http://jsfiddle.net/6L9K5/

设置了一个小提琴

Answer 1

我在您的代码中发现了三个错误。

首先，您必须根据angular docs将collect回调的名称更改为大写的'JSON_CALLBACK'：

collect: { 
  method: 'JSONP', 
  params: { v: '1.0', callback: 'JSON_CALLBACK' } 
}

然后，在您的收集回调中，您使用data，而未定义。您应该按如下方式进行更改：

feedLoader.collect({q: feed.feedURL, num: 10},{},function(result){
  var feed = result.responseData.feed;
  feedList.push(feed);
});

最后，在您的控制器中，您永远不会设置$scope.feedList变量：

app.controller('blogCtrl', ['$scope', 'createFeedList', function ($scope, createFeedList) {
  $scope.feedList = createFeedList.get();
}]);

在这里您可以找到代码的修复： http://jsfiddle.net/yohanrobert/CadYt/7/

Answer 2

您不能将get值存储在控制器的任何位置。更好的方法是这样的：

app.service('createFeedList',['feedLoader', function(feedLoader){
   return{
    get:function(callback){
        var feed = {
            feedName: 'Slashdot',
            feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
        };

        feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
            var results = data.responseData.feed;
            feedList.push(results); 
            callback(feedList);
        });
    };
   }
}])

app.controller('blogCtrl',['$scope','createFeedList', function($scope, createFeedList){
    createFeedList.get(function(data){
        this.feedList = data;
   });
}]);

Answer 3

push方法不能用于将一个数组的项附加到另一个数组。相反，你应该使用angular.copy：

    feedLoader.collect({q: feed.feedURL, num: 10},{},function(results){
        var results = data.responseData.feed;
        angular.copy(results, feedList); 
        callback(feedList);
    });

AngularJS FeedReader - 不填充数组

3 个答案: