将对象从函数返回到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)对每个摘要进行评估.这就像视图中的任何其他表达式一样,例如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');
          }
      );
    }}]);

试试这个.如果没有,那么请检查此问题 AngularJS中的可重用组件