如何监视服务变量?

我有一个服务，说:

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。我已经拼凑了这个模式，其中我添加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;
    }
  });
}

这感觉有点冗长，我一直在每个使用服务变量的控制器中重复这一点。有没有更好的方法来监视共享变量?

当前回答

我迟到了，但我找到了一个比上面的答案更好的方法。我没有分配一个变量来保存服务变量的值，而是创建了一个附加到作用域的函数，该函数返回服务变量。

控制器

$scope.foo = function(){
 return aService.foo;
}

我觉得这能满足你的要求。我的控制器通过这个实现不断检查我的服务的值。老实说，这比选择的答案要简单得多。

2016-08-18 20:00:13

其他回答

对于那些像我一样只是寻找一个简单的解决方案，这几乎完全是你所期望的在控制器中使用正常的$watch。唯一的区别是，它在javascript上下文中计算字符串，而不是在特定的作用域上。您必须将$rootScope注入到您的服务中，尽管它只用于正确地钩子到摘要周期中。

function watch(target, callback, deep) {
    $rootScope.$watch(function () {return eval(target);}, callback, deep);
};

2014-09-29 09:26:18

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

2013-07-09 21:49:06

没有手表或观察者回调(http://jsfiddle.net/zymotik/853wvv7s/):

JavaScript:

angular.module("Demo", [])
    .factory("DemoService", function($timeout) {

        function DemoService() {
            var self = this;
            self.name = "Demo Service";

            self.count = 0;

            self.counter = function(){
                self.count++;
                $timeout(self.counter, 1000);
            }

            self.addOneHundred = function(){
                self.count+=100;
            }

            self.counter();
        }

        return new DemoService();

    })
    .controller("DemoController", function($scope, DemoService) {

        $scope.service = DemoService;

        $scope.minusOneHundred = function() {
            DemoService.count -= 100;
        }

    });

HTML

<div ng-app="Demo" ng-controller="DemoController">
    <div>
        <h4>{{service.name}}</h4>
        <p>Count: {{service.count}}</p>
    </div>
</div>

这个JavaScript在我们从服务返回一个对象而不是一个值时工作。当一个JavaScript对象从服务返回时，Angular会向它的所有属性中添加手表。

还要注意，我使用'var self = this'，因为我需要在$timeout执行时保持对原始对象的引用，否则'this'将引用窗口对象。

2015-03-05 08:59:05

控制器

$scope.foo = function(){
 return aService.foo;
}

我觉得这能满足你的要求。我的控制器通过这个实现不断检查我的服务的值。老实说，这比选择的答案要简单得多。

2016-08-18 20:00:13

你可以在$rootScope中插入服务，然后观察:

myApp.run(function($rootScope, aService){
    $rootScope.aService = aService;
    $rootScope.$watch('aService', function(){
        alert('Watch');
    }, true);
});

在你的控制器中:

myApp.controller('main', function($scope){
    $scope.aService.foo = 'change';
});

另一个选择是使用外部库，例如:https://github.com/melanke/Watch.JS

"发射架:IE +， f4 +，稳定基金5+

您可以观察一个、多个或所有对象属性的变化。

例子:

var ex3 = {
    attr1: 0,
    attr2: "initial value of attr2",
    attr3: ["a", 3, null]
};   
watch(ex3, function(){
    alert("some attribute of ex3 changes!");
});
ex3.attr3.push("new value");

2014-09-13 15:24:41

如何监视服务变量?

推荐文章

最新文章

标签