javascript - AngularJS 在 Controller 中使用一个函数从服务返回数据以在 ng-repeat 中使用

Question

我正在尝试在 Controller 中使用一个函数来返回数据，这样我就可以在整个应用程序中重复使用该函数来调用数据并偶尔刷新它。

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

我可以通过使用 E 指令然后将元素放在部分中来让它工作，但这并不能满足我的需要。

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

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

我已经尝试了各种方法来让它在测试中工作，包括将 $http 放入 Controller 中，所有这些都得到了相同的结果。

如果我在 Controller 方法中分配一个变量而不是返回数据，那是可行的，但是我需要在 Controller 中调用该方法并且我不希望它默认运行。只是想在需要时在模板中进行调用。

任何有助于弄清楚为什么这不起作用的帮助都会很棒。谢谢。

这是我所拥有的但无法正常工作...

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;
});

编辑:

使用下面的一些想法，我能够以不同的方式获得我想要的功能。基本上，我希望数据按需加载，而不是预先加载，因为我试图将该 Controller 中的所有用户逻辑分组，并且我不希望为每个用户加载完整数据。我暂时使用 $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() 函数每次被调用时都会返回一个用户列表。但是，每个返回的列表都是一个新集合 (array)。对于 Angular，这意味着它必须更新页面上列表的显示。每次更新后，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>

背后的原因是现在绑定(bind)中使用变量 userList 而不是函数调用表达式，并且一旦加载列表就稳定了。