Question

我正在尝试使用AngularJS使用新闻搜索API获取Google新闻，但我遇到了一些问题。我需要帮助。

下面是我的HTML页面，其中包含了必要的库AngularJS， ngAutocomplete 和另一个Google库。 ngAutocomplete 库允许我从Google API获取基本信息（例如地理编码，管理边界和其他地理参数），然后我可以使用它来查询新闻搜索API。

<html lang="en" ng-app="StarterApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="script.js" type="text/javascript"></script>
    <script src="ngAutocomplete.js"></script>
  </head>
 <body ng-controller="AppCtrl">
  <form id="form" role="form">                 
     <input type="text" id="Autocomplete" ng-autocomplete="result1" details="details1" options="options1">
     </input-container>
     <button data-ng-click="findNews(result1)">Search</button>                                
  </form>
 <div data-ng-repeat="news in newsData">
     <img src="{{news.image.url}}}"alt="{{news.title}}">
     <h2>{{news.title}}</h2>
     <p>{{news.content}}</p>
 </div>
  </body>
</html>

这是我的 script.js

(function(){ 

'use strict;'
angular.module('StarterApp', ['ngMaterial', 'ngAutocomplete'])

.controller('AppCtrl', ['newsService', '$scope', '$mdSidenav', function(newsService, $scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };

 function fetchNews(result1){
    newsService.getNews(result1).then(function(data){
      $scope.location = data;
    });
  }
  fetchNews('San Francisco');

  $scope.findNews = function(result1){
    $scope.location = '';
    fetchNews(result1);
  };

}])

.factory ('newsService', ['$http', '$q', function($http, $q){


  function getNews(result1){

    var deferred = $q.defer();
    $http.get('https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=' + result1)
      .success(function(data){
        newsData = data.responseData.results;
        console.log(newsData);
      })
      .error(function(err){
        console.log('Error retrieving News');
        deferred.reject(err);
      });
    return deferred.promise;
  }
  return{
    getNews:getNews
  }
}])

})();

当我输入旧金山，然后点击搜索按钮时，该应用会获取用户输入并查询Google新闻搜索API，然后返回一个对象。

查询从News Search API返回一个News对象;我可以在console.log上看到它但不幸的是我无法使用ngRepeat在页面上显示它们。

<div data-ng-repeat="news in newsData">
  <img src="{{news.image.url}}}"alt="{{news.title}}">
  <h2>{{news.title}}</h2>
  <p>{{news.content}}</p>
</div>

完整代码位于Plunker http://plnkr.co/4vbaWZvcSRMGXppA5sXY或http://run.plnkr.co/plunks/eevO0F/

上

使用Google新闻搜索API通过AngularJS

0 个答案: