AngularJS在控制器中使用一个函数，从服务中返回数据，以便在ng-repeat中使用。

15 浏览
0 Comments

AngularJS在控制器中使用一个函数，从服务中返回数据，以便在ng-repeat中使用。

我正在尝试在控制器中使用一个函数来返回数据，以便我可以在整个应用程序中重复使用该函数来调用数据，并且偶尔刷新数据。\n我的代码看起来是正确的，但实际上，在每次加载时都会导致浏览器崩溃。\n通过使用一个E指令并在部分中放置该元素，我可以使其工作，但这并不能实现我所需要的。\n最终，我想做这样的事情：\n{{ user.somedata }}\n我尝试了各种方法来进行测试，包括将$http放在控制器中，但结果都一样。\n如果我在控制器方法中分配一个变量而不是返回数据，那么它可以工作，但是我需要在控制器中调用该方法，而且我不希望默认运行它。只是希望在需要时在模板中调用该方法。\n如果能帮助我找出为什么这不起作用，那将是很好的。谢谢。\n以下是我没有正常工作的代码...\n

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

\n编辑：\n使用下面的一些想法，我能够以不同的方式获得我想要的功能。基本上，我希望数据按需加载，而不是一开始就加载，因为我正在尝试将所有用户逻辑分组在该控制器中，并且我不希望为每个用户加载完整数据。我暂时使用$rootScope，直到我解决一些作用域继承问题，因为使用$scope.users最终导致模板中的空值。我可以看到AJAX调用返回，但不确定它去了哪里，但这是另一个问题。\n

elite.controller('UserController', function($scope, $rootScope, User){
    $scope.getListUsers = function(){
        User.listUsers().then(function(response){
            $rootScope.users = response.users;
        });
    };
});

\n在导航元素中，我有这个：\n

用户列表

0

2 答案

0 Comments

AngularJS中的控制器在使用服务返回数据时遇到了一些问题。首先，你在一个匿名函数中返回一个值，这个匿名函数会在从$http.get调用返回的promise得到解析时被调用。这个匿名函数的返回值不会成为getListUsers函数的返回值。其次，在控制器回调函数中引用的是response.users。这仍然是原始的响应对象。你可能想引用的是response.data.users。请尝试以下代码：

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

$scope.users = [];

$scope.getListUsers = function(){

User.listUsers().then(function(response){

$scope.users = response.data.users;

});

}

});

elite.factory('User', function($http){

var User = {

getUser: function(id){

return $http.get('/user/' + id + '/settings');

},

listUsers: function(){

return $http.get('/user/');

}

}

return User;

});

然后，在视图中绑定它：

{{ user.somedata }}

如果users是undefined或为空，ng-repeat指令将不会生成任何元素。这个解决方法适用于在服务中处理原始数据的情况。

0
0 Comments

问题的原因是每次调用getListUsers()函数时都返回一个新的用户列表，这导致Angular认为列表发生了变化，从而不断更新列表并调用getListUsers()函数。为了解决这个问题，可以创建一个变量来保存用户列表，并创建一个函数来更新列表。然后在ng-repeat指令中使用这个变量，这样就可以确保列表加载完成后变得稳定。只需要在需要重新加载列表的地方调用reloadListUsers函数即可。

解决方法如下：

1. 创建一个变量userList来保存用户列表：

$scope.userList = [];

2. 创建一个函数reloadListUsers来更新列表：

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

3. 在ng-repeat指令中使用userList变量：

{{ user.somedata }}

4. 在需要重新加载列表的地方调用reloadListUsers函数：

这样做的原因是现在绑定中使用的变量是userList，而不是函数调用表达式，一旦列表加载完成后，变量userList就变得稳定了。

希望这样修改之后能解决你的问题。如果还有作用域的问题，你可以尝试解决一下。

0