javascript - 将对象从函数返回到 AngularJS 中的 ng-repeat

Question

我正在尝试将对象从函数返回给 ng-repeat:

<ul ng-controller="Users" ng-repeat="user in users">
    <li ng-controller="Albums" ng-repeat="album in getAlbumList(user.name)">
        {{album.title}}
    </li>
</ul>

.controller('Albums', ['$scope','Imgur', function($scope, Imgur) {
    $scope.getAlbumList = function(user) {
        Imgur.albumList.get({user:user},    
            function(value) {
                return value.data;
                console.log('success');
            },
            function(error) {
                console.log('something went wrong');
            }
        );
    }
}]);

.factory('Imgur', function($resource, $http) {
    return {
        albumList : $resource('https://api.imgur.com/3/account/:user/albums'),
        album : $resource('https://api.imgur.com/3/account/:user/album/:id')
    }
});

然而，这种方法在每次加载页面时都会使我的浏览器崩溃。

执行此操作的正确方法是什么？

Answer 1

因此，您有 ng-repeat="album in getAlbumList(user.name)"，这是一个 Angular 表达式。 ng-repeat 所做的是在每个摘要上评估 getAlbumList(user.name)。这就像 View 中的任何其他表达式一样，例如 ng-show 或其他任何表达式，并且这些表达式始终 都会被计算。如果您的表达式计算数百次的速度很慢，那么您不应该在这样的表达式中使用它。

这里是该函数中的 Ajax 调用。即使您以某种方式有一个阻塞的同步 Ajax 调用，它也会慢几个数量级。表达式应该只访问手边的数据，或者运行简单的代码来排序和过滤。他们不应该尝试进行 Ajax 调用。

但这是假设它是同步 Ajax，而事实并非如此。该表达式简单地调用 getAlbumList 并假定结果是一个数组并将其用于 ng-repeat。该函数不返回任何内容，因此它返回 undefined，您什么也得不到。

因此，要回答您的问题，您应该做的是，在作用域上放置一个空数组，从 ng-repeat 使用它，然后通过 Ajax 填充它。 Angular 的美妙之处在于数据一旦出现就会“弹出”在 View 中。这是一些查看代码:

<ul>
  <li ng-repeat="album in albums">{{album.title}}</li>
</ul>

还有一些 Controller 代码:

$scope.albums = [];
Imgur.albumList.get({user:user},
    function(value) {
        $scope.albums = value.data;
        console.log('success');
    },
    function(error) {
        console.log('something went wrong');
    }
);

这基本上是您已有的代码，只是不是从函数运行，而是直接在 Controller 的构造函数中运行。

编辑

我认为您的根本误解是认为从 ngResource 回调中返回某些内容会反过来从包含函数 (getAlbumList) 中返回它。事实并非如此。包含函数运行，不返回任何内容，稍后在您的回调运行时返回一些内容，但没有人使用该返回值。