AngularJS：如何监视服务变量？

Question

我有一个服务，说：

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>

以便控制器检测何时维修。foo更新了，我拼凑了这个模式，将服务添加到控制器的$范围，然后使用$范围$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;
    }
  });
}

这让人觉得很费时，我一直在每个使用服务变量的控制器中重复这一点。有没有更好的方法来完成监视共享变量的任务？




Answer 1

我使用与@dtheodot类似的方法，但使用角度promise，而不是传递回调

app.service('myService', function($q) {
    var self = this,
        defer = $q.defer();

    this.foo = 0;

    this.observeFoo = function() {
        return defer.promise;
    }

    this.setFoo = function(foo) {
        self.foo = foo;
        defer.notify(self.foo);
    }
})

然后在任何地方使用myService.setFoo（foo）方法在服务上更新foo。在您的控制器中，您可以将其用作：

myService.observeFoo().then(null, null, function(foo){
    $scope.foo = foo;
})

然后的前两个参数是success和error回调，第三个参数是notify回调。

q美元参考。

Answer 2

在这样的场景中，如果多个/未知对象可能对更改感兴趣，请使用$rootScope$从正在更改的项目广播。

与其创建自己的侦听器注册表（必须在各种$销毁时清理），您应该能够从相关服务$广播。

您仍然必须在每个侦听器中的处理程序上对$进行编码，但该模式与对$摘要的多个调用分离，从而避免了长时间运行的监视程序的风险。

这样，监听器也可以从DOM和/或不同的子作用域来来去去，而不需要服务更改其行为。

**更新：示例**

广播在“全球”服务中最有意义，这可能会影响应用程序中的无数其他内容。一个很好的例子是用户服务，其中可能发生许多事件，例如登录、注销、更新、空闲等。我认为这是广播最有意义的地方，因为任何作用域都可以侦听事件，甚至不需要注入服务，而且它不需要计算任何表达式或缓存结果来检查更改。它只是触发并忘记（因此，请确保这是一个触发并忘记通知，而不是需要采取行动的事情）

.factory('UserService', [ '$rootScope', function($rootScope) {
   var service = <whatever you do for the object>

   service.save = function(data) {
     .. validate data and update model ..
     // notify listeners and provide the data that changed [optional]
     $rootScope.$broadcast('user:updated',data);
   }

   // alternatively, create a callback function and $broadcast from there if making an ajax call

   return service;
}]);

当save（）函数完成且数据有效时，上述服务将向每个作用域广播一条消息。或者，如果是$资源或ajax提交，请将广播调用移动到回调中，以便在服务器响应时触发。广播特别适合这种模式，因为每个侦听器都只是等待事件，而不需要检查每个$摘要上的范围。侦听器看起来像：

.controller('UserCtrl', [ 'UserService', '$scope', function(UserService, $scope) {

  var user = UserService.getUser();

  // if you don't want to expose the actual object in your scope you could expose just the values, or derive a value for your purposes
   $scope.name = user.firstname + ' ' +user.lastname;

   $scope.$on('user:updated', function(event,data) {
     // you could inspect the data to see if what you care about changed, or just update your own scope
     $scope.name = user.firstname + ' ' + user.lastname;
   });

   // different event names let you group your code and logic by what happened
   $scope.$on('user:logout', function(event,data) {
     .. do something differently entirely ..
   });

 }]);

这样做的好处之一是消除了多个手表。如果像上面的示例那样组合字段或派生值，则必须同时查看firstname和lastname属性。只有当用户对象在更新时被替换时，才能监视getUser（）函数，如果用户对象只是更新了其属性，则不会触发该函数。在这种情况下，你必须做一个深度观察，这是更密集的。

$广播将消息从它调用的范围向下发送到任何子范围。因此从$rootScope调用它将在每个范围内触发。例如，如果您要从控制器的范围内广播$，它将仅在继承自控制器范围的范围内触发。$emit方向相反，行为类似于DOM事件，因为它在范围链中冒泡。

请记住，有些场景中$broadcast很有意义，有些场景中$watch是一个更好的选择-尤其是在具有非常特定的watch表达式的隔离范围中。

Answer 3

如果您想避免$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
};