angularjs - 在不断更新的两个控制器之间共享数据

Question

我想使用某种工厂方法在两个控制器之间共享数据。控制器 Ctrl1 属于第一个 DIV 标签，从该标签发送 HTTP 请求并以流方式接收来自服务器的数据。在其他 DIV 标记中，我想将该结果显示为一个列表（ng-repeat），该列表会随着第一个 DIV 中的 HTTP 结果的更新而不断更新（此外，第二个 DIV 标记在第一个 DIV 标记获得第一个时立即开始显示结果响应，第一个 DIV 消失）。我知道如何在控制器之间传递数据一次（例如 ng-click="pass()"），但不知道如何实现这一点。我正在寻找不使用 $rootScope 的答案。

Answer 1

您应该创建一个服务来包含数据，然后将服务注入每个控制器。

例如，让我们定义一个“myService”服务，其中一个属性“foo”等于字符串“bar”：

angular.module('myModule').service('myService', function() {
  this.foo = 'bar';
});

我们现在可以在控制器中使用它：

angular.module('myModule').controller('MyCtrl', function($scope, myService) {
   $scope.myService = myService;
});

现在可以像往常一样在模板中访问{{myService.foo}}它ng-model="myService.foo"。

然后，您可以以类似的方式在第二个控制器中使用它，当您在任一控制器中更新属性“foo”时，更改将在控制器之间持续存在。这是因为 Angular 中的服务是单例的。您通过定义这样的服务所做的是创建一个单例“myService”，它可以在您想要的任何地方注入，并且始终只实例化一次。

如果您需要监视控制器代码中的更改，您可以像往常一样在 myService.foo 上使用 $scope.$watch()。