AngularJS function uses a function in the controller to return data from the service that will be used in ng-repeat

Question

I am trying to use a function in the controller to return data so that I can reuse the function in the application to call the data and also update it periodically.

My code looks correct, but in practice it disables the browser with every download.

I can make it work using the E directive and then putting the element in partial, but this does not do what I need.

Ultimately, I would like to do something like this:

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

I tried different things to make it work in testing, including embedding $ http in the controller, all with the same results.

If I assign a variable in the controller method instead of returning data, this works, but then I will need to call the method in the controller, and I do not want it to be executed by default. Just looking to make a call in the templates when necessary.

Any help in figuring out why this is not working would be great. Thank you

Here is what I have that doesn't work ...

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

Edit:

Using some of the ideas below, I can get the functionality I wanted differently. Basically, I want the data to be loaded on demand, not the front, because I am trying to group all the user logic in this controller, and I do not want all the data to be loaded for each user. I use $ rootScope temporarily until I figure out some issues with inheritance inheritance, since using $ scope.users ends with a null value in the template. I can see that the AJAX call is returning, but not sure where this is going, but this is another problem.

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

And in the nav element, I have this:

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

Answer 1

These are roughly $ digest, $ watch and ng-repeat. You can find many answers simply by using Google or the link provided by Jsplaine.

In short, your getListUsers () function returns a list of users for each call. However, each returned list represents a new collection (array). For angular, this means that it must update the display of the list on the page. After each update, Angular really check several times to make sure the list becomes stable or not by calling the getListUsers () function again. Each time Angular finds that the list is different, so it continues to update the list and continue to call the getListUser function.

To solve this problem, you can create a variable containing a list of users:

  $scope.userList = []; 

as well as a list update function

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

Then in the ng-repeat directive

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

If you want to reload the list, just call the reloadListUsers function.

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

The reason is that now the userList variable is used in the binding instead of the function call expression and becomes stable after the list is loaded.

Answer 2

There are several issues. You are returning a value from an anonymous function that is called when the promise returned from the call to $ http.get is resolved. The return value of this function will not be the value returned by getListUsers.

In addition, you refer to response.users in the controller callback. This is still a raw response object. Did you mean the response.data.users link?

Try the following:

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

Then bind it in the view:

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

The ng-repeat directive does not spit out any elements if users are undefined or empty.