Question

我试图从Google Feed API中提取图片，以显示在我正在构建的RSS阅读器中。我已成功拉出已发布的日期和contentSnippet，但似乎无法获取图像src。下面是我当前的feed部分和控制器。在这里，我只是试图通过拉出第一张图片来测试一种方法，但它没有返回任何东西。

feeds.html：

<div ng-repeat="feed in feeds | orderBy:'title'">
    <span ng-repeat="item in feed.entries">
        <h2><a href="{{item.link}}" target="_blank">{{item.title}}</a></h2>
        <img src="{{firstImg}}" alt="">
        <p>{{item.publishedDate}}</p>
        <p>{{item.contentSnippet}}</p>
    </span>
</div>

FeedCtrl.js：

var feeds = [];

angular.module('feedModule', [])
    .factory('FeedLoader', function ($resource) {
        return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
            fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
        });
    })
    .service('FeedList', function ($rootScope, FeedLoader) {
        this.get = function() {
            var feedSources = [
            {title: 'Breaking Muscle', url:     'http://breakingmuscle.com/feed/nowod.xml'},
            {title: 'Precision Nutrition', url: 'http://www.precisionnutrition.com/feed'},
            {title: 'Girls Gone Strong', url: 'http://www.girlsgonestrong.com/feed/'},
        ];
        if (feeds.length === 0) {
            for (var i=0; i<feedSources.length; i++) {
                FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
                    var feed = data.responseData.feed;
                    feeds.push(feed);
                });
            }
        }
        return feeds;
    };
})
.controller('FeedController', function ($scope, FeedList) {
    $scope.feeds = FeedList.get();
    $scope.$on('FeedList', function (event, data) {
        $scope.feeds = data;
        var findFirstImage = data[0].entries[0].content;
        var firstImage = $(findFirstImage).find('img').eq(0).attr('src');
        $scope.firstImg = firstImage;
    });
});

Answer 1

请参见此处：http://jsbin.com/xidik/1/edit或http://jsbin.com/xidik/3/edit找到每个Feed的图片。

将$ q服务添加到您的FeedList＆＃39;服务，然后在您的FeedController中迭代您的数据，当承诺将被解析为找到图像。

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

var feeds = [];

app.factory('FeedLoader', function ($resource) {
    return $resource('http://ajax.googleapis.com/ajax/services/feed/load', {}, {
        fetch: { method: 'JSONP', params: {v: '1.0', callback: 'JSON_CALLBACK'} }
    });
});

app.service('FeedList', function ($rootScope, FeedLoader, $q) {
    this.get = function() {
        var deferred= $q.defer();
        var feedSources = [
            {title: 'Breaking Muscle', url:     'http://breakingmuscle.com/feed/nowod.xml'},
            {title: 'Precision Nutrition', url: 'http://www.precisionnutrition.com/feed'},
            {title: 'Girls Gone Strong', url: 'http://www.girlsgonestrong.com/feed/'},
        ];
        if (feeds.length === 0) {
            for (var i=0; i<feedSources.length; i++) {
                FeedLoader.fetch({q: feedSources[i].url, num: 10}, {}, function (data) {
                    var feed = data.responseData.feed;
                    feeds.push(feed);
                    deferred.resolve(feeds);
                });
            }
        }

        return deferred.promise;
    };
});

app.controller('firstCtrl', function($scope, FeedList) {
    FeedList.get().then(function(data){
        $scope.feeds = data;

        angular.forEach(data[0].entries, function(value) {
            value.sapleImage =$(value.content).find('img').eq(0).attr('src');
        });       

    })
});

使用Angular从Google Feed API获取图片

1 个答案: