我有一个服务,说:

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

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


当前回答

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

其他回答

我提出了这个问题,但事实证明,我的问题是,当我应该使用angular的$interval提供程序时,我却使用了setInterval。setTimeout也是如此(使用$timeout代替)。我知道这不是OP问题的答案,但它可能会有所帮助,就像它帮助了我一样。

据我所知,你不需要做那么复杂的事情。您已经将foo从服务分配到作用域,并且由于foo是一个数组(反过来又是一个对象,它是通过引用分配的!). 所以,你所需要做的就是这样:

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

 }

如果这个Ctrl中的其他变量依赖于foo的变化,那么是的,你需要一个手表来观察foo并对该变量进行更改。但只要是简单的参考观看是不必要的。希望这能有所帮助。

// service:(这里没有什么特别的)

myApp.service('myService', function() {
  return { someVariable:'abc123' };
});

/ / ctrl:

myApp.controller('MyCtrl', function($scope, myService) {

  $scope.someVariable = myService.someVariable;

  // watch the service and update this ctrl...
  $scope.$watch(function(){
    return myService.someVariable;
  }, function(newValue){
    $scope.someVariable = newValue;
  });
});

看看这个活塞:这是我能想到的最简单的例子?

http://jsfiddle.net/HEdJF/

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="Data.FirstName"><!-- Input entered here -->
        <br>Input is : <strong>{{Data.FirstName}}</strong><!-- Successfully updates here -->
    </div>
    <hr>
    <div ng-controller="SecondCtrl">
        Input should also be here: {{Data.FirstName}}<!-- How do I automatically updated it here? -->
    </div>
</div>



// declare the app with no dependencies
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
   return { FirstName: '' };
});

myApp.controller('FirstCtrl', function( $scope, Data ){
    $scope.Data = Data;
});

myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.Data = Data;
});

我在另一个线程上找到了一个非常好的解决方案,有类似的问题,但方法完全不同。当$rootScope值被改变时,$watch within指令将无法正常工作

基本上解决方案告诉不要使用$watch,因为它是非常沉重的解决方案。相反,他们建议使用$emit和$on。

我的问题是在我的服务中观察一个变量并在指令中做出反应。用上面的方法就很简单了!

我的模块/服务示例:

angular.module('xxx').factory('example', function ($rootScope) {
    var user;

    return {
        setUser: function (aUser) {
            user = aUser;
            $rootScope.$emit('user:change');
        },
        getUser: function () {
            return (user) ? user : false;
        },
        ...
    };
});

所以基本上我观察我的用户-每当它被设置为新值时I $emit一个user:change status。

在我的例子中,在我使用的指令中:

angular.module('xxx').directive('directive', function (Auth, $rootScope) {
    return {
        ...
        link: function (scope, element, attrs) {
            ...
            $rootScope.$on('user:change', update);
        }
    };
});

现在在指令中,我监听$rootScope和给定的更改-我分别做出反应。非常简单和优雅!