javascript - AngularJS 和多个 $http 查询的逻辑问题

Question

我有一个应用会向外部 API 发出 2 个 $http 查询并获得 2 个不同的 JSON 响应。这些响应将填充 ng-repeat、 header 等。我的问题是我想包括第三个查询，依赖于前两个。

像这样:

我获取艺术家 JSON 和发布 JSON，我使用 artist.name 和 release.title 来填充第三个 $http 查询的 URL。

到目前为止，我已经设法获得了前两个查询，一旦结果显示在 ng-repeat 中，使用 ng-click 我启动第三个查询并填充 img ng-src。

Buuut，我的问题是我希望在没有 ng-click 的情况下自动填充 img ng-src，因此触发第三个查询的函数必须在 2 个第一个查询之后立即启动。而且，在我现在的工作版本中，我使用 ng-click 获取的 img 将填充 ng-repeat 中的所有项目。这意味着每个项目都应该有自己的图像，而现在他们没有。

我创建了一个 working Plunker ，如果您搜索音乐艺术家并单击结果，然后单击专辑，您就会明白我的意思。

基本上，我认为我缺少将所有内容放在一起并按正确的触发顺序排列的逻辑。

有什么想法吗？

我的JS:

angular.module('myApp', ['ngResource'])

  function Ctrl($scope, $http) {
    var search = function(name) {
      if (name) {
        $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=5').
          success(function(data3) {
            $scope.clicked = false;
            $scope.results = data3.results;
          });
      }
      $scope.reset = function () {
        $scope.sliding = false;
        $scope.name = undefined;
      }
    }
    $scope.$watch('name', search, true);

    $scope.getDetails = function (id) {
      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
        });
      $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=100').
        success(function(data2) {
            $scope.releases = data2.releases;
        });
      $scope.clicked = true;
      $scope.sliding = true;
      $scope.getImages = function (title, name) {
        $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + name + '&album='+ title +'&format=json').
          success(function(data4) {
              $scope.images = data4;
          });
      }
    }


  };

我的指令:

angular.module('myApp', ['ngResource'])

 .directive('artistData', function() {

      return{
          restrict: 'E',
          template: '<div class="col-md-8 col-md-offset-2"> \
                     <h1 ng-show="artist.name" class="artist-name">{{artist.name}}</h1>  \
                     <div class="header-border" ng-show="artist.name"></div> \
                     <input ng-show="artist.name" class="form-control" ng-model="album" /> \
                      <div class="col-md-3" ng-click="getImages(release.title, artist.name)" ng-repeat="release in releases | filter:album | filter:{ role: \'main\' }"><div class="release">{{release.title}}<img class="img-responsive" ng-src="{{images.album.image[2][\'#text\']}}" /></div></div> \
                     </div>',
          replace: true
      };
    })  

还有我的 HTML:

<div class="container">
  <div class="row" ng-controller="Ctrl">
    <div class="col-md-8 col-md-offset-2">
      <div class="intro">

        <div class="intro-text" ng-class="{'slide':sliding}">
          <h1>Howdy stranger!</h1>
          <h3>Use the form below to search for an artist and start building your record collection!</h3>
        </div>
        <input type="text" ng-model="name" class="form-control input-lg" ng-class="{'slide':sliding}" ng-focus="reset()" placeholder="Artist name"/>
      </div>
      <ul ng-hide="clicked" class="search-results">
        <li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>
      </ul>
    </div>
    <artist-data></artist-data>
  </div>  
</div>

Answer 1

在这种情况下我会使用“Chaining Promises”。

简而言之，您将根据先前的响应调用新的异步任务。

你可以阅读这个 POST 可能对你有帮助