javascript - ng-repeat 重复，但为空

Question

我正在使用 Soundcloud API 来获取在搜索框中输入的查询的轨道，如下所示:

$scope.tracks = [];

$scope.updateResults=function(song){
        if(song.length==0){
            $scope.tracks = [];
        }
        if(song.length>3){
            SC.get('/tracks', { q: song, license: 'cc-by-sa' }, function(tracks) {
                $scope.tracks = tracks;
                            //$scope.$apply() doesn't work either
            });
        }
    }

每当在搜索栏中输入内容时，

$scope.updateResults 就会被调用。这一切都很好。我什至尝试过记录 $scope.tracks，它是一个数组，它填充了与搜索结果匹配的轨道。根据 Soundcloud API 引用，每个轨道都有一个 title 属性。我通过这样做测试了这一点:

console.log($scope.tracks[0].title)，我得到了一个带有标题的漂亮字符串。

现在在我的ng-repeat中，它是这样写的:

<ul>
    <li ng-repeat="track in tracks">{{track.title}}</li>
</ul>

我得到了几个要点，但它们都是空的。换句话说 {{track.title}} 不存在？我已经测试过这是一个有效的属性。此外，我知道 $scope.tracks 正在填充，因为确实有列表项，但它们都是空的。

感谢您的帮助!

编辑:我对ng-repeat做了一些研究，并了解到它监视诸如.push()之类的更新...仍然不能解释这种奇怪的行为，但这可能有助于识别问题。

Answer 1

这不会是对正在发生的事情的最技术性的解释，所以我感谢所有的编辑。由于 Soundcloud Javascript SDK 不使用 $http 来获取轨道，因此范围不知道当 SC.get 返回轨道时需要更新。换句话说，即使 $scope.tracks 已填充，它也不知道要更新 View 。我建议编写一个服务来处理所有对 Soundcloud 的 GET/POST/PUT/DELETE 请求。这是一个使用回调的简单示例:

.factory('Soundcloud', function($http, $rootScope, $timeout, $q) {

  var request = function(method, path, params, callback) {
    params.client_id = sc.soundcloud.client_id;
    params.oauth_token = sc.soundcloud.access_token;

    $http({
      method: method,
      url: sc.soundcloud.api.host + path,
      params: params
    })
    .success(callback);
  };

  return {
    get: function(path, params, callback) {
      request('GET', path, params, callback);
    },

    put: function(path, params, callback) {
      request('PUT', path, params, callback);
    },

    post: function(path, params, callback) {
      request('POST', path, params, callback);
    },

    delete: function(path, params, callback) {
      request('DELETE', path, params, callback);
    }
  };
})

将服务注入(inject) Controller 后，您将获得如下轨道:

Soundcloud.get('/tracks', {limit: 5}, function(tracks) {
  $scope.tracks = tracks;
});

只需设置服务获取您的 client_id 和 oauth_token 的位置即可。然后路径是您想要的任何端点，参数是您想要传递给 SC 的任何参数。