Question

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

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

我已经创建了这两个独立的控制器来保持干净并让每个控制器处理它自己各自的屏幕部分。因此，我将处理搜索的逻辑和检索结果的逻辑放入注入两个控制器的服务中。该服务的search（）方法使用结果设置data属性，并将result属性设置为控制器内的$ 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...');
            });
        }

    }
}]);

Answer 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

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

Plunkr：http://plnkr.co/edit/A75rTb

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

2 个答案: