Question

查询youtube API获取数据后，我遇到了问题。如果你想尝试jsfiddle.net/YBvQJ/4/

，这个问题会在这个jsfiddle中复制

问题如下：第一次搜索结果时，结果显示正确。但是，如果我执行第二次搜索，即使搜索已正确执行，结果也不会在视图中更新。

我有一个服务，使用$ http调用youtube API来执行给定参数的搜索。返回值是一个承诺：

.service('youTubeSearchService', ['$log', '$http', '$q', ($log, $http, $q) ->
  apiKey = 'myApiKey'
  url = 'https://www.googleapis.com/youtube/v3/search'
  deferred = $q.defer()
  return service =
    search: (query) ->
      $http.get(url, params: {
          key: apiKey
          type: 'video'
          maxResults: '6'
          part: 'id,snippet'
          fields: 'items/id,items/snippet/title'
          q: query
      })
      .success (data) ->
        $log.info "In success"
        $log.info data
        deferred.resolve data.items.map (item) ->
            videoId: item.id.videoId
            title: item.snippet.title
      .error (data) ->
        $log.info "In error"
        $log.info data
        deferred.reject data
      return deferred.promise
])
.config(['$httpProvider', ($httpProvider) ->
  # Disable this header or the youtube API won't work
  delete $httpProvider.defaults.headers.common['X-Requested-With']
])

此服务在控制器中使用，如下所示：

.controller('SearchCtrl', ['$log', '$scope', 'youTubeSearchService'
  , ($log, $scope, youTubeSearchService) ->
      $scope.search = ->
        $scope.results = youTubeSearchService.search($scope.query)
  ])

数据在视图中使用如下：

<input type="text" ng-model="query" value="ejemplo">
<button ng-click="search()">Search in YouTube</button>
<li ng-repeat="item in results">
    <p><a target="blank" href="//www.youtube.com/watch?v={{item.videoId}}">
        {{item.title}}
    </a></p>
</li>

我已在服务中添加日志调用，以显示youtube API返回一个新数组。

我认为问题可能与视图中未更新的范围有关。不应该是，因为承诺将调用$ digest循环，ng-click指令也将如此。

非常感谢帮助！提前谢谢。

Answer 1

您的搜索正在返回该服务的承诺。因此，您要将$scope.results设置为承诺。

$scope.results = youTubeSearchService.search($scope.query)

相反，您应该处理承诺并设置结果：

youTubeSearchService.search($scope.query).then(function(results) {

    $scope.results = results;    
}, function(error) { 

    $scope.error = error;
});

在coffeescript中：

youTubeSearchService.search($scope.query).then ((results) ->
  $scope.results = results
), (error) ->
  $scope.error = error

AngularJS不会更新从promise返回的数组

1 个答案: