AngularJS factory with $http and multiple controllers - angularjs

Question

I want multiple controllers to be able to update a single view attached to one controller using a factory with $http.
My list view:
<div class="list" ng-repeat="image in images" ng-controller="controller1">
<div lass="item"><img src="{{image.url}}" /></div>
</div>
Service:
.factory("imageService", function($http) {
return {
getImages: function() {
return $http({
method: "get",
url: "http://example.com/images",
params: { user: window.localStorage['user_id'] }
})
}
}
});
Controller 1:
.controller('controller1', function($scope, imageService) {
window.localStorage['user_id'] = '101';
var handleSuccess = function(data, status) {
$scope.images = data;
};
imageService.getImages().success(handleSuccess);
})
This all works. When the app is loaded, the list immediately is populated with a list of images for user '101'.
In another controller, I want to be able to switch users and automatically re-poupulate the image list in the view from controller 1 with new images.
Controller 2:
.controller('controller2', function($scope, imageService) {
window.localStorage['user_id'] = '202';
imageService.getImages();
})
So controller 2 will run getImages() and I can see the $http request working via chrome dev tools / XHR. And I know why the list view attached to controller1 is not populating, but I dont know how to make it populate. I have tried moving the success callback into the service and setting a 'images' property on the service and a $scope.images in controller1, but no luck there.
How can I force the new list of images into the view attached to controller 1?

Answer 1

You should just manage a list into your service that you will bind to your controller1 :
.factory("imageService", function($http) {
var service = {};
service.images = {};
service.images.list = [];
service.getImages = function(userId) {
window.localStorage['user_id'] = userId;
return $http({
method: "get",
url: "http://example.com/images",
params: { user: userId }
}).success(function(data){
service.images.list = data
});
}
//at the initialization of the service, you launch the getImages once with the localStorage value.
service.getImages(window.localStorage['user_id']);
return service;
});
Then you can bind it like this in your controllers :
.controller('controller1', function($scope, imageService) {
$scope.images = imageService.images;
//then access it in the view with images.list
imageService.getImages(101);
})
.controller('controller2', function($scope, imageService) {
$scope.images = imageService.images;
//then access it in the view with images.list
imageService.getImages(202);
})
Note that using a sub object (images.list instead of images) is important.
If you want some more precise informations about why this sub object is needed you can read this answer on this subject
Hope it helped.

Answer 2

I think you can just use one controller. At some time point, say, a user clicks some button, reload the image lists and re-render the view to show the list.
For example, make the factory like:
.factory("imageService", function($http) {
return {
getImages: function(userId) {
return $http({
method: "get",
url: "http://example.com/images",
params: { user: userId }
});
}
};
});
And in the controller:
.controller('imageController', function($scope, imageService) {
function refreshImages (userId) {
imageService.getImages(userId).success(function(data) {
$scope.$apply(function () {
$scope.images = data;
});
});
}
refreshImages('101');
$scope.loadImages = function (userId) {
refreshImages(userId);
};
});