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

I have an app that will make 2 $http queries to an external API and get 2 different JSON responses. These responses will populate a ng-repeat, headers, etc. My problem is that I want to include a 3rd query, dependent on the first two.

我有一个应用程序,将对外部API进行2 $ http查询,并获得2个不同的JSON响应。这些响应将填充ng-repeat,header等。我的问题是我想要包含第3个查询,这取决于前两个。

Like so:

I get artist JSON and release JSON, and I use artist.name and release.title to populate the URL of the third $http query.

我得到了艺术家JSON并发布了JSON,我使用artist.name和release.title来填充第三个$ http查询的URL。

So far I've managed to get the two first queries, and once the results they are displaying in the ng-repeat, with ng-click I launch the 3rd query and populate an img ng-src.

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

Buuut, my problem is that I want the img ng-src to be populated automatically without ng-click, so the function that triggers the 3rd query has to get launched right after the 2 first queries. And also, in my working version right now, the img that I fetch with ng-click, will populate all items in ng-repeat. Meaning that every item should get their own image, and right now they don't.

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

I've created a working Plunker, if you search for a music artist and click on a result and then on an album, you'll see what I mean.

我已经创建了一个有效的Plunker,如果你搜索一个音乐艺术家并点击一个结果,然后在一个专辑上,你会看到我的意思。

Basically, I think I'm missing a piece of logic that will put everything together and in proper trigger order.

基本上,我认为我错过了一条逻辑,它将所有内容组合在一起并按正确的触发顺序排列。

Any thoughts?

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


  };

My directive:

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

And my HTML:

我的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>

1 个解决方案

#1

I would use "Chaining Promises" in this case.

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

In basic words you call new async task on response of previous.

用基本的话来说,你可以在之前的响应中调用新的异步任务。

You can read this POST that might help you

您可以阅读此POST可能对您有所帮助