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

【问题标题】：AngularJS : How to use a service to retrieve data and share it between controllers?AngularJS：如何使用服务来检索数据并在控制器之间共享？
【发布时间】：2014-11-21 12:26:26
【问题描述】：

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

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

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

我认为它可以像这样工作，但事实并非如此。数据被正确检索并设置到服务属性，但它不会反映到控制器属性。我在这里做错了什么或遗漏了什么吗？

非常感谢任何帮助！

代码：http://jsfiddle.net/0a75uh34/3/

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

app.controller('searchController', [
    '$scope', 'searchService',

function ($scope, searchService) {
    $scope.search = {};
    $scope.data = searchService.data;

    $scope.submit = function () {
        searchService.search($scope.search);
    }
}]);

app.controller('searchListController', [
    '$scope', 'searchService',

function ($scope, searchService) {
    $scope.data = searchService.data;

    $scope.test = function () {
        console.log($scope.firms.length);
    }
}]);

app.factory('searchService', [
    '$http',

function ($http) {

    return {
        data: [],

        search: function (params) {
            var this$ = this;
            $http.post('/echo/json/', params)
                .success(function (result) {
                this$.data = result;
            })
                .error(function () {
                console.log('Oops...');
            });
        }

    }
}]);

【问题讨论】：

你的小提琴没有搜索数据，点击按钮没有任何反应。
我忽略了搜索实现，因为这不是问题。我更改了示例代码以返回一些虚拟数据：jsfiddle.net/ranthonissen/0a75uh34/5

标签： angularjs angularjs-scope angularjs-service angularjs-controller

【解决方案1】：

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

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

这里正在工作plunker

【讨论】：

我也有类似的工作，但我想通过单击按钮而不是在页面加载时从远程 WebAPI 服务检索我的数据。在此单击中，将执行服务的搜索方法并设置数据属性。当我单步执行我的代码时，我可以看到这有效，但是 searchService.data 没有反映到 $scope.data
我已经改变了你的 plunkr 来模拟我的情况：plnkr.co/edit/A75rTb?p=preview
我希望在服务中更新数据时，第二个控制器中的数据会自动更新。在我的应用程序中，我没有“测试”按钮来执行此操作
我使用 $interval 让它工作了，但这对我来说感觉很反直觉：plnkr.co/edit/A75rTb

【解决方案2】：

如本示例所示，我设法使用 $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);
});

请戳这里：http://plnkr.co/edit/A75rTb

【讨论】：