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，它也不知道更新视图。我建议编写一个服务来处理对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);
    }
  };
})

将服务注入控制器后，您将获得以下跟踪：

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

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

ng-repeat重复，但是为空

1 个答案: