AngularJS：如何使用服务检索数据并在控制器之间共享？

我在控制器之间共享数据时遇到问题

我创建了一个包含两个独立控制器的页面。一个带有搜索表单，另一个带有表格以显示搜索结果

我创建了这两个独立的控制器来保持画面整洁，并让每个控制器处理屏幕上各自的部分。因此，我将处理搜索和检索结果的逻辑放在一个注入两个控制器的服务中。 服务的search（）方法使用结果设置数据属性，结果属性设置为控制器内的$scope属性

我以为它是这样工作的，但事实并非如此。正确检索数据并将其设置为服务属性，但不会反映到控制器属性。我是做错了什么还是错过了什么

非常感谢您的帮助

守则：

---

在两个控制器之间共享数据很有趣。 首先，您需要使用工厂/服务模式创建一个服务

var app = angular.module('plunker', []);

app.factory('ServiceData', function(){
  return {data:[1,2,3,5,6,6,7,8,9,9,0]};
});

您可以在任何控制器中插入此服务，无论您创建了多少控制器

app.controller('MainCtrl', function($scope, ServiceData) {
  $scope.data = ServiceData.data;
});

app.controller('SecondCtrl', function($scope, ServiceData){
  $scope.data = ServiceData.data;
});

---

下面是工作

我使用$interval实现了所需的行为，如本示例所示：

var app = angular.module('plunker', []);

app.factory('ServiceData', function(){
  return {
    data: [1,2,3],
    search: function() { 
      var this$ = this;
      this$.data = [1,2,3,5,6,6,7,8,9,];}
  };
})

app.controller('MainCtrl', function($scope, $interval, ServiceData) {
  $interval(function() {
    $scope.data_list_1 = ServiceData.data;
  }, 100);

  $scope.doSearch = function() { ServiceData.search();};
});

app.controller('SecondCtrl', function($scope, $interval, ServiceData){
  $interval(function() {
    $scope.data_list_2 = ServiceData.data;
  }, 100);
});

---

Plunkr here:

您的小提琴没有搜索数据，单击按钮不会发生任何事情。我省略了搜索实现，因为这不是问题所在。我更改了示例代码以返回一些虚拟数据：我也得到了类似的结果，但我希望在单击按钮时从远程WebAPI服务检索数据，而不是在页面加载时。在此单击中，将执行服务的搜索方法并设置数据属性。我可以看到，当我逐步浏览我的代码时，这是可行的，但是searchService.data没有反映到$scope.data中。我已经更改了您的plunkr以模拟我的情况：我希望在服务中更新数据时，第二个控制器中的数据会自动更新。在我的应用程序中，我没有“测试”按钮，我使用$interval使其工作，但这对我来说有点违反直觉：

var app = angular.module('plunker', []);

app.factory('ServiceData', function(){
  return {
    data: [1,2,3],
    search: function() { 
      var this$ = this;
      this$.data = [1,2,3,5,6,6,7,8,9,];}
  };
})

app.controller('MainCtrl', function($scope, $interval, ServiceData) {
  $interval(function() {
    $scope.data_list_1 = ServiceData.data;
  }, 100);

  $scope.doSearch = function() { ServiceData.search();};
});

app.controller('SecondCtrl', function($scope, $interval, ServiceData){
  $interval(function() {
    $scope.data_list_2 = ServiceData.data;
  }, 100);
});