AngularJS：如何使用服務來檢索數據並在控制器之間共享？

Question

我在控制器之間共享數據時遇到問題。

我用2個獨立的控制器創建了一個頁面。一個帶有搜索表單，另一個帶有表格以顯示搜索結果。

我已經創建了這兩個獨立的控制器來保持事物的清潔，並讓每個控制器處理其各自的屏幕部分。因此，我將處理搜索的邏輯和檢索結果的邏輯放入一個注入兩個控制器的服務中。 服務的search（）方法用結果設置數據屬性，並將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], 
    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

Answer 2

共享數據的樂趣。 首先，您需要使用工廠/服務模式創建服務。

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