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: '
 \
                     
{{artist.name}}
  \
                     
 \
                      \
                      
{{release.title}}
 \
                     
',
          replace: true
      };
    })  

And my HTML:

我的HTML:

  

    

      


        

          
Howdy stranger!
          
Use the form below to search for an artist and start building your record collection!
        
        
      
      

        
{{result.title}}
      
    
    
  
  

1 个解决方案