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

return object from Function to ng-repeat in AngularJS

提问by Dan Kanze

I am trying to return an object from a function to ng-repeat:

我正在尝试将一个对象从一个函数返回到 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')
    }
});

This approach however crashes my browser on every page load.

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

What is the right way to do this?

这样做的正确方法是什么？

回答by jpsimons

So, you have ng-repeat="album in getAlbumList(user.name)", which is an Angular expression. What ng-repeat does is evaluates getAlbumList(user.name)on every digest. This is just like any other expression in a view, such as ng-show or whatever, and those expressions get evaluated all the time. If your expression is slow to evaluate hundreds of times, you shouldn't have it in an expression like this.

所以，你有ng-repeat="album in getAlbumList(user.name)"，这是一个 Angular 表达式。ng-repeat 所做的是getAlbumList(user.name)对每个摘要进行评估。这就像在一个视图中的任何其他表达，如NG-表演或什么的，而那些表现得到评估所有的时间。如果您的表达式计算数百次的速度很慢，那么您不应该在这样的表达式中使用它。

What you have here is an Ajax call in that function. Even if you somehow had a blocking synchronous Ajax call, it would be orders of magnitude too slow. Expressions should just access data already at hand, or maybe run simple code to sort and filter. They should never try to make Ajax calls.

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

But that's assuming it's synchronous Ajax, which this isn't. The expression simply calls getAlbumListand assumes the result is an array and uses it for ng-repeat. That function returns nothing, so it returns undefined, and you get nothing.

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

So to answer your question, what you should do is, put an empty array on scope, use that from the ng-repeat, and fill it in via Ajax. The beauty of Angular means the data will just "pop in" in the view once it's there. Here's some view code:

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

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

And some controller code:

还有一些控制器代码：

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

Which is basically the code you already had, just not run from a function, but run right in the constructor of the controller.

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

Edit

编辑

I think your fundamental misunderstanding is thinking that returning something from an ngResource callback will in turn return it from the containing function (getAlbumList). That's not the case. The containing function runs, returns nothing, then later on your callback runs, returns something, but no one is using that return value.

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

回答by Ketan

<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');
          }
      );
    }}]);

Try this. If not then check this question Reusable components in AngularJS

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