AngularJS使用控制器中的函数来返回要在ng-repeat中使用的服务的数据

Question

我试图在控制器中使用一个函数来返回数据,这样我就可以在应用程序中重用该函数来调用数据并偶尔刷新它.

我的代码看起来是正确的,但实际上,在每次加载时都会崩溃浏览器.

我能够通过使用E指令然后将元素放在部分中来使其工作,但这不能实现我所需要的.

最终,我想做这样的事情:

<div ng-repeat="user in getListUsers()">{{ user.somedata }}</div>

我已经尝试了各种各样的东西让它在测试中工作,包括将$ http放在控制器中,所有都具有相同的结果.

如果我在控制器方法中分配一个变量而不是返回数据,那可行,但是我需要在控制器中调用该方法,我不希望它默认运行.只是想在需要时在模板中进行调用.

任何帮助弄清楚为什么这不起作用将是伟大的.谢谢.

这就是我的功能......

elite.controller('UserController', function($scope, User){

    $scope.getListUsers = function(){
        User.listUsers().then(function(response){
            return response.users;
        });
    }

});

elite.factory('User', function($http){
   var User = {
      getUser: function(id){
          return $http.get('/user/' + id + '/settings').then(function(response){
              return response.data; 
          });
      },
      listUsers: function(){
        return $http.get('/user/').then(function(response){
          return response.data;
        });
      }
   }
   return User;
});

编辑:

使用下面的一些想法,我能够以不同的方式获得我想要的功能.基本上,我希望数据按需加载,而不是预先加载,因为我试图将该控制器中的所有用户逻辑分组,并且我不希望为每个用户加载完整数据.我暂时使用$ rootScope,直到我找出一些范围继承问题,因为使用$ scope.users在模板中以空值结束.我可以看到AJAX呼叫回来,但不知道它在哪里,但这是另一个问题.

elite.controller('UserController', function($scope, $rootScope, User){

    $scope.getListUsers = function(){

        User.listUsers().then(function(response){
            $rootScope.users = response.users;
        });
    };

});

在nav元素中我有这个:

<div ng-controller="UserController">
<a ng-href="/#user/list" ng-click="getListUsers()">user list</a>
</div>

Answer 1

这是关于$ digest,$ watch和ng-repeat.只需谷歌搜索或查看Jsplaine给出的链接,您就可以找到很多答案.

简而言之,getListUsers()函数每次调用时都会返回一个Users列表.但是,每个返回的列表都是一个新集合(数组).对于角度,这意味着它必须更新页面上列表的显示.每次更新后,Angular会通过再次调用getListUsers()函数来检查列表是否变得稳定.每当angular发现列表不同时,它就会不断更新列表并继续调用getListUser函数.

要解决此问题,您可以创建一个包含用户列表的变量:

 $scope.userList = [];

以及更新列表的功能

$scope.reloadListUsers = function(){
    User.listUsers().then(function(response){
        $scope.userList = response.users;
    });
}

然后在ng-repeat指令中

<div ng-repeat="user in userList">{{ user.somedata }}</div>

如果要重新加载列表,只需调用reloadListUsers函数即可.

<button ng-click="reloadListUsers()" > reload </button>

背后的原因是现在变量userList用于绑定而不是函数调用表达式,并且一旦加载列表就变得稳定.