AngularJS Austausch von Daten zwischen Controllern

Question

Ich habe einen Dienst, der einige Client-Daten von meinem Server abruft:

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

Dann in einem Controller ich tue:

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

, die alle sehr gut funktioniert. Aber ich versuche, eine Uhr von einem anderen Controller auf diesen Dienst zu tun, es ist Umfang zu aktualisieren, wenn sich die Daten ändern, eher dann treten wieder off Anfrage die http mit:

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

Ich bin nur für Alarmierungs jetzt, aber es löst nie aus. Wenn die Seite anfänglich geladen wird, warnt sie "undefiniert". Ich habe keine Fehler in der Konsole und alle $ injects sind in Ordnung, aber es scheint nie zu erkennen, dass Daten im Service geändert haben. Mache ich etwas falsch in der Uhr?

Vielen Dank Ben

Answer 1

clientDataService.clientDataObject ist nicht Teil des Controllers Umfang, so können Sie für Änderungen an diesem Objekt nicht sehen. Sie müssen das $ rootScope in Ihren Dienst injizieren und dann die Änderungen an die Bereiche der Controller übertragen.

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

Dann in der Steuerung können Sie für die Änderung hören mit:

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

Answer 2

Ein anderer Ansatz sein kann:

1. definieren neue Service

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

2. umfassen dieser neue Ser vice in Controller, wo wir die Daten

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

3. um diesen neuen Service in der Steuerung gespeichert werden sollen, wo wir die Daten

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