我正在处理包含用户供稿页面的Angular应用程序,供稿中的一个项目是用户所属的组列表。这些组通过$ resource调用从后端拉出,该调用接受用户id作为参数。
我面临的问题是allGroups($ resource调用返回的集合)在$ scope中可用,但不在页面上呈现。
以下是设置groups变量的控制器:
angular.module('kickitAngularFrontendApp')
.controller('UserCtrl', function ($timeout, $scope, User, $rootScope) {
$timeout(function() {
User.allGroups.query({user_id: $rootScope.user.id}, function(data) {
$scope.allgroups = data;
})
}, 130);
});
这是用户工厂
angular.module('kickitAngularFrontendApp')
.factory('User', function ($resource) {
return {
allGroups: $resource('http://localhost:3000/api/users/:user_id/get_groups', {
query: { method: 'GET', params: {}, isArray: false }
}),
groupsCreated: $resource('http://localhost:3000/api/users/:id/get_groups_created', {
query: { method: 'GET', params: {}, isArray: false }
}),
allEvents: $resource('http://localhost:3000/api/users/:id/get_events', {
query: { method: 'GET', params: {}, isArray: false }
}),
eventsCreated: $resource('http://localhost:3000/api/users/:id/get_events_created', {
query: { method: 'GET', params: {}, isArray: false }
}),
};
});
以下是渲染组
的视图<div class="col-md-3">
<h3>Group Feed</h3>
<ul class="list-group" ng-controller="UserCtrl">
<li class="list-group-item" ng-repeat="group in allGroups"></li>
</ul>
</div>
我可以看到allGroups对象附加到UserCtrl $ scope并使用ng-inspector查看它,但它不会在页面上呈现。我的想法是因为$ resource请求需要在页面加载后设置的$ rootScope.user对象的id,因此无法呈现它。
如果确实如此,我将如何解决它?非常感谢任何帮助。
另外,如果有帮助,我正在使用Angular ui-router。