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