javascript - 使用 Angular 从 Google Feed API 获取图像

Question

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

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正在为每个提要查找图像。

将 $q 服务添加到您的“FeedList”服务，然后在您的 FeedController 中迭代您的数据，当 promise 将被解决以查找图像时。

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');
        });       

    })
});