我正在尝试将一个对象从函数返回到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)返回.情况并非如此包含的函数运行,没有返回任何东西,然后在你的回调运行中返回一些东西,但是没有人使用该返回值.