带有 $http 和多个控制器的 AngularJS 工厂

Question

我希望多个控制器能够使用带有 $http 的工厂更新附加到一个控制器的单个视图。

我的列表视图：

<div class="list" ng-repeat="image in images" ng-controller="controller1">
   <div lass="item"><img src="{{image.url}}" /></div>
</div>

服务：

.factory("imageService", function($http) {
  return {
    getImages: function() {
      return $http({
        method: "get",
        url: "http://example.com/images",
        params: { user: window.localStorage['user_id'] }
      })
    }
  }
});

控制器 1：

.controller('controller1', function($scope, imageService) {
   window.localStorage['user_id'] = '101';
   var handleSuccess = function(data, status) {
       $scope.images = data;
   };
   imageService.getImages().success(handleSuccess);
})

这一切都有效。加载应用后，列表会立即填充用户“101”的图像列表。

在另一个控制器中，我希望能够切换用户并使用新图像自动从控制器 1 重新填充视图中的图像列表。

控制器 2：

.controller('controller2', function($scope, imageService) {
   window.localStorage['user_id'] = '202';
   imageService.getImages();
})

所以控制器 2 将运行 getImages()，我可以看到 $http 请求通过 chrome 开发工具/XHR 工作。而且我知道为什么附加到 controller1 的列表视图没有填充，但我不知道如何填充它。我尝试将成功回调移动到服务中并在服务上设置“图像”属性并在控制器 1 中设置 $scope.images，但没有运气。

如何将新的图像列表强制添加到附加到控制器 1 的视图中？

Answer 1

您应该在服务中管理一个列表，您将绑定到您的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;
});

然后你可以在你的控制器中像这样绑定它：

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

请注意，使用子对象（images.list 而不是 images）很重要。

如果您想了解更多关于为什么需要此子对象的详细信息，您可以阅读 this answer 关于此主题的内容

希望对您有所帮助。

Answer 2

我认为您可以只使用一个控制器。例如，在某个时间点，用户单击某个按钮，重新加载图像列表并重新渲染视图以显示列表。

例如，将工厂设为：

.factory("imageService", function($http) {
  return {
    getImages: function(userId) {
      return $http({
        method: "get",
        url: "http://example.com/images",
        params: { user: userId }
      });
    }
  };
});

在控制器中：

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