AngularJS : 서비스 변수를 보는 방법

질문 : AngularJS : 서비스 변수를 보는 방법?

---

서비스가 있습니다.

factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
  var service = {
    foo: []
  };

  return service;
}]);

foo 를 사용하여 HTML로 렌더링되는 목록을 제어하고 싶습니다.

<div ng-controller="FooCtrl">
  <div ng-repeat="item in foo">{{ item }}</div>
</div>

aService.foo 업데이트시기를 감지하기 위해 $scope 에 aService를 추가 한 다음 $scope.$watch() 를 사용하는이 패턴을 함께 조합했습니다.

function FooCtrl($scope, aService) {                                                                                                                              
  $scope.aService = aService;
  $scope.foo = aService.foo;

  $scope.$watch('aService.foo', function (newVal, oldVal, scope) {
    if(newVal) { 
      scope.foo = newVal;
    }
  });
}

이것은 긴 손으로 느껴지며 서비스의 변수를 사용하는 모든 컨트롤러에서 반복했습니다. 공유 변수를 관찰하는 더 좋은 방법이 있습니까?

답변

---

$watch 의 폭정과 오버 헤드를 피하려면 항상 좋은 오래된 관찰자 패턴을 사용할 수 있습니다.

서비스에서 :

factory('aService', function() {
  var observerCallbacks = [];

  //register an observer
  this.registerObserverCallback = function(callback){
    observerCallbacks.push(callback);
  };

  //call this when you know 'foo' has been changed
  var notifyObservers = function(){
    angular.forEach(observerCallbacks, function(callback){
      callback();
    });
  };

  //example of when you may want to notify observers
  this.foo = someNgResource.query().$then(function(){
    notifyObservers();
  });
});

그리고 컨트롤러에서 :

function FooCtrl($scope, aService){
  var updateFoo = function(){
    $scope.foo = aService.foo;
  };

  aService.registerObserverCallback(updateFoo);
  //service now in control of updating foo
};

출처 : https://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variables