☰

AngularJS: サービス変数を監視するにはどうすればいいですか? 質問する

tag-icon • tag-icon angularjs watch angular-services
AngularJS: サービス変数を監視するにはどうすればいいですか? 質問する

サービスがあります。

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

  return service;
}]);

fooHTML でレンダリングされるリストを制御するために使用したいと思います:

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

コントローラーが更新されたことを検出できるように、aService.fooコントローラーに aService を追加し$scopeて使用するというパターンを組み立てました$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;
    }
  });
}

これは冗長な感じがします。サービスの変数を使用するすべてのコントローラーでこれを繰り返しています。共有変数を監視するより良い方法はありますか?

ベストアンサー1

の専横とオーバーヘッドを回避したい場合は、いつでも古き良きオブザーバー パターンを使用できます$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
};

おすすめ記事