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

这一切都有效。加载应用程序后，列表会立即填充用户＆＃39; 101＆＃39;

的图像列表。

在另一个控制器中，我希望能够切换用户并自动将控制器1视图中的图像列表与新图像重新耦合。

控制器2：

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

因此控制器2将运行getImages（），我可以通过chrome dev tools / XHR看到$ http请求。我知道为什么附加到controller1的列表视图没有填充，但我不知道如何填充它。我已经尝试将成功回调转移到服务中并设置一个＆＃39;图像＆＃39;服务上的属性和controller1中的$ 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);
   };
});

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

2 个答案: