javascript – 返回对象从功能到ng重复在AngularJS

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

这种方法在每次加载页面时都会导致我的浏览器崩溃.

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

解决方法

所以,你在getAlbumList(user.name)中有ng-repeat =“album”,这是一个Angular表达式.什么ng重复的是评估每个摘要的getAlbumList(user.name).这就像视图中的任何其他表达式,例如ng-show或者其他任何表达式,这些表达式一直被评估.如果您的表达式评估数百次缓慢,您不应该像这样的表达式.

这里有一个Ajax调用.即使你以某种方式阻止了同步的Ajax调用,这将是数量级太慢.表达式应该只是访问已经存在的数据,或者可以运行简单的代码进行排序和过滤.他们不应该尝试使Ajax调用.

但是,这是假设它是同步的Ajax,这不是.该表达式简单地调用getAlbumList并假定结果是一个数组,并将其用于ng-repeat.该函数不返回任何内容,因此它返回未定义,并且您什么都没有.

所以要回答你的问题,你应该做的是把一个空数组放在范围上,使用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)返回.情况并非如此包含的函数运行,没有返回任何东西,然后在你的回调运行中返回一些东西,但是没有人使用该返回值.

原文地址：https://www.jb51.cc/js/150877.html