Синхронизация данных между контроллерами через службу

Question

От this stackoverflow question, я понимаю, что я должен использовать службы для передачи данных между контроллерами.

Однако, как видно из my example JSFiddle, у меня возникли проблемы с прослушиванием изменений в моем сервисе, когда он изменен на контроллерах.

angular.module('myApp', []) 
    .controller('Ctrl1', function ($scope, App) { 
     $scope.status = App.data.status; 
     $scope.$watch('App.data.status', function() { 
      $scope.status = App.data.status; 
     }); 
}) 
    .controller('Ctrl2', function ($scope, App) { 
     $scope.status = App.data.status; 
     $scope.$watch('status', function() { 
      App.data.status = $scope.status; 
     }); 
}) 
    .service('App', function() { 
     this.data = {}; 
     this.data.status = 'Good'; 
}); 

В моем примере, я пытаюсь, чтобы подписаться на App.data.status в Ctrl1, и я пытаюсь опубликовать данные Ctrl1 в App. Однако, если вы попытаетесь изменить поле ввода в div, связанное с Ctrl2, текст не изменяется на границе контроллера до Ctrl1.

Answer 1

http://jsfiddle.net/VP4d5/2/

Вот обновленная скрипка. В принципе, если вы собираетесь использовать один и тот же объект данных между двумя контроллерами из службы, вам просто нужно использовать какой-либо объект, кроме примитива строки или javascript. В этом случае я просто использую обычный Object {} для обмена данными между двумя контроллерами.

JS

angular.module('myApp', []) 
    .controller('Ctrl1', function ($scope, App) { 
     $scope.localData1 = App.data; 
}) 
    .controller('Ctrl2', function ($scope, App) { 
     $scope.localData2 = App.data; 
}) 
    .service('App', function() { 
     this.data = {status:'Good'}; 
}); 

HTML-

<div ng-controller="Ctrl1"> 
    <div> Ctrl1 Status is: {{status}} 
    </div> 
    <div> 
     <input type="text" ng-model="localData1.status" /> 
    </div> 
<div ng-controller="Ctrl2">Ctrl2 Status is: {{status}} 
    <div> 
     <input type="text" ng-model="localData2.status" /> 
    </div> 
</div> 

Ничего плохого с помощью службы здесь, но если единственной целью является, чтобы иметь общий объект через приложение, то я думаю, с помощью .value марок немного больше смысла. Если у этой службы будут функции для взаимодействия с конечными точками, и данные обязательно будут использовать angular.copy для обновления свойств объекта вместо использования =, который заменит местную ссылку службы, но не будет отображаться в контроллерах.

http://jsfiddle.net/VP4d5/3/

Модифицированный JS с помощью .value

angular.module('myApp', []) 
    .controller('Ctrl1', function ($scope, sharedObject) { 
     $scope.localData1 = sharedObject; 
}) 
    .controller('Ctrl2', function ($scope, sharedObject) { 
     $scope.localData2 = sharedObject; 
}) 
.value("sharedObject", {status:'Awesome'}); 

Answer 2

Я согласен с @shaunhusain, но я думаю, что вы бы лучше использовать фабрику вместо службы:

angular.module('myApp', []) 
    .controller('Ctrl1', function ($scope, App) { 
     $scope.localData1 = App.data; 
    }) 
    .controller('Ctrl2', function ($scope, App) { 
     $scope.localData2 = App.data; 
    }) 
    .factory('App', function() { 
     var sharedObj = { 
      data : { 
       status: 'Good' 
      } 
     }; 

     return sharedObj; 
    }); 

Вот некоторая информация, которая может помочь вам разобраться в различиях между factory и service: When creating service method what's the difference between module.service and module.factory