使用Angular從Google Feed API獲取圖像

Question

我試圖從Google Feed API中拖動圖像以顯示在我正在構建的RSS閱讀器中。我已經成功地拉出了publishedDate和contentSnippet，但似乎無法獲得圖像src。下面是我目前的飼料部分和控制器。在這裏，我只是試圖通過拉第一個圖像來測試一個方法，但它不會返回任何東西。

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中迭代通過您的數據，當承諾將被解析爲查找圖像。

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

    }) 
});