Question

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

像这样：

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

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

Buuut，我的问题是我想在没有ng-click的情况下自动填充img ng-src，因此触发第3个查询的函数必须在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

我会使用＆＃34; Chaining Promises＆＃34;在这种情况下。

在基本的单词中，您可以在之前的响应中调用新的异步任务。

enter image description here

您可以阅读可能对您有用的 POST

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

1 个答案: