Angularjs chia sẻ dữ liệu giữa các bộ điều khiển

Question

Tôi có một dịch vụ mà lấy về một số dữ liệu khách hàng từ máy chủ của tôi:

app.factory('clientDataService', function ($http) { 
    var clientDataObject = {}; 
    var cdsService = { 
     fetch: function (cid) { 
      //$http returns a promise, which has a then function, which also returns a promise 
      var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) { 
       // The then function here is an opportunity to modify the response 
       console.log(response); 
       // The return value gets picked up by the then in the controller. 
       clientDataObject = {'data': response.data, 'currentClientID': cid}; 
       return clientDataObject; 
      }); 
      // Return the promise to the controller 
      return promise; 
     } 
    }; 
    return cdsService; 
}); 

Sau đó, trong một bộ điều khiển tôi làm:

//get stats 
clientDataService.fetch($scope.id).then(function (response) { 
    $scope.client_data = { 
     'statistics': response.data 
    } 
}); 

Mà tất cả hoạt động rất tốt. Tuy nhiên, tôi đang cố gắng để làm một chiếc đồng hồ từ controller khác về dịch vụ đó để cập nhật nó phạm vi khi dữ liệu thay đổi, thay vì sau đó phải tái khởi yêu cầu http:

$scope.$watch('clientDataService.clientDataObject', function (cid) { 
    alert(cid); 
}); 

Tôi chỉ cảnh báo cho bây giờ, nhưng nó chưa bao giờ kích hoạt. Khi trang tải ban đầu, trang sẽ thông báo "không xác định". Tôi không có lỗi trong giao diện điều khiển và tất cả các $ injects là tốt, nhưng nó dường như không bao giờ nhận ra rằng dữ liệu đã thay đổi trong dịch vụ. Tôi có làm gì sai trong chiếc đồng hồ không?

Rất cám ơn Bến

Answer 1

clientDataService.clientDataObject không phải là một phần của phạm vi điều khiển của bạn, vì vậy bạn không thể xem các thay đổi về đối tượng đó. Bạn cần phải tiêm $ rootScope vào dịch vụ của bạn rồi phát các thay đổi cho phạm vi bộ điều khiển.

app.factory('clientDataService', function ($rootScope, $http) { 
    var clientDataObject = {}; 
    var cdsService = { 
     fetch: function (cid) { 
      var promise = $http.get('/clients/stats/' + cid + '/').then(function (response) { 
       // The then function here is an opportunity to modify the response 
       console.log(response); 
       // The return value gets picked up by the then in the controller. 
       clientDataObject = {'data': response.data, 'currentClientID': cid}; 
       $rootScope.$broadcast('UPDATE_CLIENT_DATA', clientDataObject); 
       return clientDataObject; 
      }); 
      // Return the promise to the controller 
      return promise; 
     } 
    }; 
    return cdsService; 
}); 

Sau đó, trong bộ điều khiển bạn có thể nghe cho sự thay đổi sử dụng:

$scope.$on('UPDATE_CLIENT_DATA', function (event, clientDataObject) { }); 

Answer 2

cách tiếp cận khác có thể là:

1. xác định dịch vụ mới

   app.factory('DataSharingObject', function(){ 
       return {}; 
   } 
   

2. bao gồm ser mới này phó trong bộ điều khiển nơi chúng tôi muốn để lưu trữ các dữ liệu

   app.factory('clientDataService', function ($http, DataSharingObject) { 
       DataSharingObject.sharedata = ..assign it here 
   } 
   

3. bao gồm dịch vụ mới này trong điều khiển nơi chúng tôi muốn truy cập dữ liệu

   app.factory('clientReceivingService', function ($http, DataSharingObject) { 
       ..use it here... = DataSharingObject.sharedata 
   }