2013-08-14 3 views
12

У меня есть сервис, который извлекает некоторые данные клиента с моего сервера:Angularjs обмен данными между контроллерами

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

Тогда в одном контроллере я делаю:

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

Что все работает очень хорошо. Тем не менее, я пытаюсь сделать часы из другого контроллера на эту услугу, чтобы обновить его область действия при изменении данных, а затем с повторно пнуть запрос HTTP:

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

Я просто предупреждая для теперь, но это никогда не срабатывает. Когда страница изначально загружается, она предупреждает «undefined». У меня нет ошибок в консоли, и все инъекции $ отлично, но никогда не кажется, что данные изменились в службе. Я делаю что-то не так в часах?

Большое спасибо Бен

ответ

13

clientDataService.clientDataObject не является частью сферы вашего контроллера, так что вы не можете наблюдать за изменениями на этом объекте. Вам нужно ввести $ rootScope в свою службу, а затем транслировать изменения в области контроллеров.

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

Затем в контроллере можно прослушивать изменения с помощью:

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

большое спасибо .. работал как шарм –

9

Другой подход может быть:

  1. определить новую услугу

    app.factory('DataSharingObject', function(){ 
        return {}; 
    } 
    
  2. включают этот новый ser вице-контроллер, где мы хотим сохранить данные

    app.factory('clientDataService', function ($http, DataSharingObject) { 
        DataSharingObject.sharedata = ..assign it here 
    } 
    
  3. включают эту новую услугу в контроллер, где мы хотим получить доступ к данным

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

как вы заметили, что пули и формирование кода не очень хорошо сочетаются друг с другом: последний нуждается в 8 ведущих пространствах (против обычного 4) – kleopatra

Смежные вопросы