AngularJS:如何观察服务变量? [英] AngularJS : How to watch service variables?

问题描述

我有一项服务，比如说:

factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {无功服务 = {富:[]};退货服务；}]);

我想使用 foo 来控制以 HTML 呈现的列表:

<div ng-repeat="foo 中的项目">{{ item }}</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) {如果(新值){scope.foo = newVal;}});}

这感觉很麻烦，我一直在每个使用服务变量的控制器中重复它.有没有更好的方法来完成监视共享变量?

解决方案

如果你想避免 $watch 的暴政和开销，你总是可以使用好的旧观察者模式.

在服务中:

factory('aService', function() {var观察者回调 = [];//注册一个观察者this.registerObserverCallback = 函数(回调){observerCallbacks.push(callback);};//当你知道'foo'已经改变时调用它var notifyObservers = function(){angular.forEach(observerCallbacks, 函数(回调){打回来();});};//你可能想要通知观察者的例子this.foo = someNgResource.query().$then(function(){通知观察者()；});});

在控制器中:

function FooCtrl($scope, aService){var updateFoo = function(){$scope.foo = aService.foo;};aService.registerObserverCallback(updateFoo);//服务现在控制更新foo};

I have a service, say:

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

  return service;
}]);

And I would like to use foo to control a list that is rendered in HTML:

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

In order for the controller to detect when aService.foo is updated I have cobbled together this pattern where I add aService to the controller's $scope and then use $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;
    }
  });
}

This feels long-handed, and I've been repeating it in every controller that uses the service's variables. Is there a better way to accomplish watching shared variables?

解决方案

You can always use the good old observer pattern if you want to avoid the tyranny and overhead of $watch.

In the service:

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

And in the controller:

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

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

这篇关于AngularJS:如何观察服务变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！