angularjs - Soundcloud API + ng-repeat 没有完全填充 View

Question

我正在为我 friend 的乐队编写一个站点，该站点使用 Angular 和 SoundCloud API，但我无法解决这个问题。

在我的第一个 Controller 中，我能够使用简单的 $http.get 使用由 soundcloud 用户 JSON 填充的表达式更新 View 。

在我的第二个 Controller 中，我想获取每条轨道 + 轨道统计数据，并使用 ng-repeat 将它们放在自己的 html 段落中。但是，当我这样做时，ng-repeat 循环了适当的次数 (45X)，但只有 3 个创建的元素填充了轨道信息。大约有 40 个空白元素，然后显示前三首歌曲，因为它们后面应该是另一个空白部分。

这是我的代码:

(function(){

angular.module("ninety", [])

  .controller("bandInfo", ['$http', function($http){
   
    var ninetystuff = this; 
    ninetystuff.data = [];
    $http.get('https://api.soundcloud.com/users/23749941.json?client_id=b4809581f93dc4d3308994300923b660').success(function(data){
      ninetystuff.data = data;
    });
 
  }])
  
  .controller("music", ['$http', '$scope', function($http, $scope){
     
    var ninetyshit = this;
    ninetyshit.data = [];
    $scope.show = false;
    
    SC.initialize({
      client_id: "b4809581f93dc4d3308994300923b660"
    });

    SC.get('/users/23749941/tracks').then(function(tracks){
      ninetyshit.data = tracks;
      $scope.show = true;
    });
   
    $scope.playTrack = function(track) {
      SC.oEmbed(track, {
        auto_play: true,
        maxheight: 200
      }).then(function(embed){
        $("#player").empty();
        $("#player").append(embed.html);
      });
    }; 
   
  }])

  .directive('scrollToPlayer', function() {                                              
    return {
      restrict: 'A',
      link: function(scope, $elm, attr) {
        $elm.on('click', function() {
          $('html,body, #bg').animate({scrollTop: 400 }, 1000);
        });
      }
    };
  });

})();

我已经尝试创建一个服务来处理从“GET”请求返回的 promise ，但我得到了相同的结果。

Answer 1

我终于弄明白了，我以错误的方式解析 JSON 数据。我应该在问题中提供我的 html 代码。当我只需要循环遍历返回的数据本身(即 ng-repeat="index in数据”)。愚蠢的错误，我绝对为自己做了复杂的事情。事实上，我使用的错误解决方案显示了一些但不是所有轨道，这让我错误地认为我正在正确循环，而实际上我并没有正确循环。

希望这对遇到类似问题的任何 Angular 新手有所帮助。学过的知识。