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屋!