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)。这就像视图中的任何其他表达式一样，例如ng-show或其他表达式，并且这些表达式始终被评估。如果你的表达式评估数百次很慢，你不应该在这样的表达式中使用它。

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

但是假设它是同步的Ajax，这不是。表达式只调用getAlbumList并假设结果是一个数组并将其用于ng-repeat。该函数不返回任何内容，因此返回undefined，你什么也得不到。

所以要回答你的问题，你应该做的是，在范围上放一个空数组，使用ng-repeat中的数组，然后通过Ajax填充它。 Angular的美妙之处在于，一旦它存在，数据就会在视图中“弹出”。这是一些视图代码：

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

一些控制器代码：

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

这基本上就是你已经拥有的代码，只是不是从一个函数运行，而是在控制器的构造函数中运行。

修改

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

Answer 2

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


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

试试这个。如果没有，请检查此问题 Reusable components in AngularJS

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

2 个答案: