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>

为了让控制器检测到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) {
    if(newVal) { 
      scope.foo = newVal;
    }
  });
}

这感觉很长，我一直在每个使用服务变量的控制器中重复它。有没有更好的方法来完成观察共享变量？

Answer 1

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

Answer 2

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

您应该能够从相关服务$broadcast创建自己的侦听器注册表（必须在各种$ destroys上清理），而不是创建自己的侦听器注册表。

您仍然必须在每个侦听器中对$on处理程序进行编码，但该模式与多个$digest调用分离，因此避免了长时间运行的观察者的风险。

这样，听众也可以来自 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（）函数完成且数据有效时，上面的服务会向每个范围广播一条消息。或者，如果它是$ resource或ajax提交，请将广播调用移动到回调中，以便在服务器响应时触发。广播非常适合这种模式，因为每个听众只需要等待事件而无需检查每个$ digest上的范围。听众看起来像：

.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（）函数，如果用户对象仅更新了其属性，则不会触发它。在这种情况下，你必须做一个深刻的手表，这是更密集的。

$ broadcast将消息从它调用的范围发送到任何子范围。所以从$ rootScope调用它将触发每个范围。例如，如果您从控制器的范围进行$广播，则只会在从控制器范围继承的范围内触发。 $ emit方向相反，行为类似于DOM事件，因为它会使范围链冒泡。

请记住，在某些情况下，$ broadcast非常有意义，并且有些情况下$ watch是更好的选择 - 特别是在具有非常特定的监视表达的隔离范围中。

Answer 3

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

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

then的前两个参数是成功和错误回调，第三个是通知回调。

Reference for $q.

Answer 4

没有手表或观察者回调（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会将监视添加到其所有属性中。

另请注意，我正在使用＆＃39; var self = this＆＃39;因为我需要在$ timeout执行时保持对原始对象的引用，否则＆＃39;这个＆＃39;将引用窗口对象。

Answer 5

据我所知，你不必做那样详细的事情。您已经将foo从服务分配给范围，因为foo是一个数组（反过来它是一个通过引用分配的对象！）。所以，你需要做的就是这样：

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

 }

如果有的话，同一个Ctrl中的其他变量依赖于foo更改然后是，你需要一个手表来观察foo并对该变量进行更改。但只要它是一个简单的参考，观看是不必要的。希望这可以帮助。

Answer 6

我偶然发现了这个寻找类似问题的问题，但我认为应该对所发生的事情以及其他一些解决方案进行彻底的解释。

当HTML中存在角色表达式（例如您使用的角色表达式）时，Angular会自动为$watch设置$scope.foo，并会在$scope.foo更改时更新HTML。 / p>

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

这里未说明的问题是，影响aService.foo的两件事之一就是未检测到更改。这两种可能性是：

1. aService.foo每次都被设置为一个新数组，导致对它的引用过时。
2. aService.foo正在以更新时未触发$digest周期的方式进行更新。

问题1：过时的参考文献

考虑到第一种可能性，假设正在应用$digest，如果aService.foo始终是同一个数组，则自动设置$watch会检测到更改，如代码段所示下方。

解决方案1-a：确保每次更新时数组或对象是同一对象

＆＃13;
＆＃13;
angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .factory('aService2', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Keep the same array, just add new items on each update
      $interval(function() {
        if (service.foo.length < 10) {
          service.foo.push(Math.random());
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    'aService2',
    function FooCtrl($scope, aService, aService2) {
      $scope.foo = aService.foo;
      $scope.foo2 = aService2.foo;
    }
  ]);
＆＃13;
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in foo">{{ item }}</div>
    <h1>Array is the same on each udpate</h1>
    <div ng-repeat="item in foo2">{{ item }}</div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

正如您所看到的，假设aService.foo附加的ng-repeat在aService.foo更改时不会更新，但附加到aService2.foo 的ng-repeat会。这是因为我们对aService.foo的引用已过时，但我们对aService2.foo的引用并非过时。我们使用$scope.foo = aService.foo;创建了对初始数组的引用，然后服务在其下一次更新时将其丢弃，这意味着$scope.foo不再引用我们想要的数组。

但是，虽然有几种方法可以确保初始引用保持一致，但有时可能需要更改对象或数组。或者，如果服务属性引用了String或Number这样的原语，该怎么办？在这些情况下，我们不能简单地依赖于参考。那么可以我们做什么？

之前给出的几个答案已经为这个问题提供了一些解决方案。不过，我个人赞成在评论中使用Jin和thetallweeks建议的简单方法：

  

只需引用html标记中的aService.foo

解决方案1-b：将服务附加到范围，并在HTML中引用{service}.{property}。

意思是，只需这样做：

HTML：

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

JS：

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

＆＃13;
＆＃13;
angular.module('myApp', [])
  .factory('aService', [
    '$interval',
    function($interval) {
      var service = {
        foo: []
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      $interval(function() {
        if (service.foo.length < 10) {
          var newArray = []
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);
＆＃13;
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Array changes on each update</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

这样，$watch将在每个aService.foo上解析$digest，这将获得正确更新的值。

这是你试图用你的解决方法做的一种事情，但是方式要少得多。您在控制器中添加了一个不必要的$watch，只要foo发生更改，就会$scope显式放置$watch。当您将aService而不是aService.foo附加到$scope时，您不需要额外的aService.foo，并在标记中明确绑定到$digest。

现在，假设正在应用$digest周期，这一切都很顺利。在上面的示例中，我使用Angular的$interval服务来更新数组，这些数组会在每次更新后自动启动$digest循环。但是，如果服务变量（无论出于何种原因）未在＆＃34; Angular world＆＃34;内部进行更新，该怎么办？换句话说，只要服务属性发生变化，我们 dont 就会自动激活aService.foo周期？

问题2：缺少$digest

这里的许多解决方案都可以解决这个问题，但我同意Code Whisperer：

  

我们使用像Angular这样的框架的原因是为了不制作我们自己的观察者模式

因此，我希望继续在HTML标记中使用$rootScope.$apply()引用，如上面的第二个示例所示，而不必在Controller中注册其他回调。

解决方案2：使用带有factory('aService', [ '$rootScope', function($rootScope) { var realFoo = []; var service = { set foo(a) { realFoo = a; $rootScope.$apply(); }, get foo() { return realFoo; } }; // ... }

的setter和getter

我很惊讶没有人建议使用setter和getter。这种能力是在ECMAScript5中引入的，因此已存在多年。当然，这意味着，无论出于何种原因，你需要支持真正的旧浏览器，那么这种方法将无法工作，但我觉得getter和setter在JavaScript中被大量使用。在这种特殊情况下，它们可能非常有用：

angular.module('myApp', [])
  .factory('aService', [
    '$rootScope',
    function($rootScope) {
      var realFoo = [];

      var service = {
        set foo(a) {
          realFoo = a;
          $rootScope.$apply();
        },
        get foo() {
          return realFoo;
        }
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      setInterval(function() {
        if (service.foo.length < 10) {
          var newArray = [];
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.aService = aService;
    }
  ]);

＆＃13;
＆＃13;
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <h1>Using a Getter/Setter</h1>
    <div ng-repeat="item in aService.foo">{{ item }}</div>
  </div>
</body>

</html>
＆＃13;
realFoo
＆＃13;
＆＃13;
＆＃13;

我在这里添加了一个私人＆＃39;服务函数中的变量：get foo()。在set foo()对象上分别使用service和$rootScope.$apply()函数更新和检索此内容。

请注意在set函数中使用service.foo。这可确保Angular了解$rootScope.$applyAsync()的任何更改。如果你得到了inprog＆＃39;错误请参阅this useful reference page，或者如果您使用Angular＆gt; = 1.3，则可以使用aService.foo。

如果{{1}}经常更新，也要小心，因为这可能会对性能产生重大影响。如果性能存在问题，您可以使用setter设置类似于其他答案的观察者模式。

Answer 7

您可以在$ 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 9 +，FF 4 +，SF 5 +，WebKit，CH 7 +，OP 12 +，BESEN，Node.JS，Rhino 1.7 +

您可以观察一个，多个或所有对象属性的更改。

示例：

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");​

Answer 8

<强> ==修订==

非常简单，现在在$ watch。

Pen here

HTML：

<div class="container" data-ng-app="app">

  <div class="well" data-ng-controller="FooCtrl">
    <p><strong>FooController</strong></p>
    <div class="row">
      <div class="col-sm-6">
        <p><a href="" ng-click="setItems([ { name: 'I am single item' } ])">Send one item</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 2' }, { name: 'Item 2 of 2' } ])">Send two items</a></p>
        <p><a href="" ng-click="setItems([ { name: 'Item 1 of 3' }, { name: 'Item 2 of 3' }, { name: 'Item 3 of 3' } ])">Send three items</a></p>
      </div>
      <div class="col-sm-6">
        <p><a href="" ng-click="setName('Sheldon')">Send name: Sheldon</a></p>
        <p><a href="" ng-click="setName('Leonard')">Send name: Leonard</a></p>
        <p><a href="" ng-click="setName('Penny')">Send name: Penny</a></p>
      </div>
    </div>
  </div>

  <div class="well" data-ng-controller="BarCtrl">
    <p><strong>BarController</strong></p>
    <p ng-if="name">Name is: {{ name }}</p>
    <div ng-repeat="item in items">{{ item.name }}</div>
  </div>

</div>

JavaScript的：

var app = angular.module('app', []);

app.factory('PostmanService', function() {
  var Postman = {};
  Postman.set = function(key, val) {
    Postman[key] = val;
  };
  Postman.get = function(key) {
    return Postman[key];
  };
  Postman.watch = function($scope, key, onChange) {
    return $scope.$watch(
      // This function returns the value being watched. It is called for each turn of the $digest loop
      function() {
        return Postman.get(key);
      },
      // This is the change listener, called when the value returned from the above function changes
      function(newValue, oldValue) {
        if (newValue !== oldValue) {
          // Only update if the value changed
          $scope[key] = newValue;
          // Run onChange if it is function
          if (angular.isFunction(onChange)) {
            onChange(newValue, oldValue);
          }
        }
      }
    );
  };
  return Postman;
});

app.controller('FooCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.setItems = function(items) {
    PostmanService.set('items', items);
  };
  $scope.setName = function(name) {
    PostmanService.set('name', name);
  };
}]);

app.controller('BarCtrl', ['$scope', 'PostmanService', function($scope, PostmanService) {
  $scope.items = [];
  $scope.name = '';
  PostmanService.watch($scope, 'items');
  PostmanService.watch($scope, 'name', function(newVal, oldVal) {
    alert('Hi, ' + newVal + '!');
  });
}]);

Answer 9

您可以在工厂内观察更改，然后广播更改

angular.module('MyApp').factory('aFactory', function ($rootScope) {
    // Define your factory content
    var result = {
        'key': value
    };

    // add a listener on a key        
    $rootScope.$watch(function () {
        return result.key;
    }, function (newValue, oldValue, scope) {
        // This is called after the key "key" has changed, a good idea is to broadcast a message that key has changed
        $rootScope.$broadcast('aFactory:keyChanged', newValue);
    }, true);

    return result;
});

然后在你的控制器中：

angular.module('MyApp').controller('aController', ['$rootScope', function ($rootScope) {

    $rootScope.$on('aFactory:keyChanged', function currentCityChanged(event, value) {
        // do something
    });
}]);

通过这种方式，您可以将所有相关的工厂代码放在其描述中，然后您只能依赖来自外部的广播

Answer 10

在 dtheodor的答案的基础上，您可以使用类似于下面的内容来确保您不会忘记取消注册回调...有些人可能会反对将$scope传递给虽然服务。

factory('aService', function() {
  var observerCallbacks = [];

  /**
   * Registers a function that will be called when
   * any modifications are made.
   *
   * For convenience the callback is called immediately after registering
   * which can be prevented with `preventImmediate` param.
   *
   * Will also automatically unregister the callback upon scope destory.
   */
  this.registerObserver = function($scope, cb, preventImmediate){
    observerCallbacks.push(cb);

    if (preventImmediate !== true) {
      cb();
    }

    $scope.$on('$destroy', function () {
      observerCallbacks.remove(cb);
    });
  };

  function notifyObservers() {
    observerCallbacks.forEach(function (cb) {
      cb();
    });
  };

  this.foo = someNgResource.query().$then(function(){
    notifyObservers();
  });
});

Array.remove是一个扩展方法，如下所示：

/**
 * Removes the given item the current array.
 *
 * @param  {Object}  item   The item to remove.
 * @return {Boolean}        True if the item is removed.
 */
Array.prototype.remove = function (item /*, thisp */) {
    var idx = this.indexOf(item);

    if (idx > -1) {
        this.splice(idx, 1);

        return true;
    }
    return false;
};

Answer 11

对于像我这样的人只是在寻找一个简单的解决方案，这几乎完全符合你在控制器中使用普通$ watch的期望。 唯一的区别是，它在它的javascript上下文中评估字符串，而不是在特定范围内。您必须将$ rootScope注入到您的服务中，尽管它仅用于正确挂钩摘要周期。

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

Answer 12

我在另一个线程上找到了一个非常好的解决方案，遇到类似问题，但方法完全不同。资料来源：AngularJS : $watch within directive is not working when $rootScope value is changed

基本上那里的解决方案告诉不要使用$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;
        },
        ...
    };
});

所以基本上我观看我的user - 只要设置为新值我$emit user:change状态。

现在在我的情况下，在指令中我使用了：

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

现在在指令中，我在$rootScope和上听给定的更改 - 我分别做出反应。非常轻松优雅！

Answer 13

我遇到了这个问题，但事实证明我的问题是当我应该使用angular $ interval提供程序时我正在使用setInterval。这也是setTimeout的情况（改为使用$ timeout）。我知道这不是OP问题的答案，但它可能对一些人有所帮助，因为它帮助了我。

Answer 14

在遇到一个非常类似的问题时，我在范围内看了一个函数，并让函数返回服务变量。我创建了一个js fiddle。你可以在下面找到代码。

    var myApp = angular.module("myApp",[]);

myApp.factory("randomService", function($timeout){
    var retValue = {};
    var data = 0;

    retValue.startService = function(){
        updateData();
    }

    retValue.getData = function(){
        return data;
    }

    function updateData(){
        $timeout(function(){
            data = Math.floor(Math.random() * 100);
            updateData()
        }, 500);
    }

    return retValue;
});

myApp.controller("myController", function($scope, randomService){
    $scope.data = 0;
    $scope.dataUpdated = 0;
    $scope.watchCalled = 0;
    randomService.startService();

    $scope.getRandomData = function(){
        return randomService.getData();    
    }

    $scope.$watch("getRandomData()", function(newValue, oldValue){
        if(oldValue != newValue){
            $scope.data = newValue;
            $scope.dataUpdated++;
        }
            $scope.watchCalled++;
    });
});

Answer 15

这是我的通用方法。

mainApp.service('aService',[function(){
        var self = this;
        var callbacks = {};

        this.foo = '';

        this.watch = function(variable, callback) {
            if (typeof(self[variable]) !== 'undefined') {
                if (!callbacks[variable]) {
                    callbacks[variable] = [];
                }
                callbacks[variable].push(callback);
            }
        }

        this.notifyWatchersOn = function(variable) {
            if (!self[variable]) return;
            if (!callbacks[variable]) return;

            angular.forEach(callbacks[variable], function(callback, key){
                callback(self[variable]);
            });
        }

        this.changeFoo = function(newValue) {
            self.foo = newValue;
            self.notifyWatchersOn('foo');
        }

    }]);

在您的控制器中

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

    $scope._initWatchers = function() {
        aService.watch('foo', $scope._onFooChange);
    }

    $scope._onFooChange = function(newValue) {
        $scope.foo = newValue;
    }

    $scope._initWatchers();

}

FooCtrl.$inject = ['$scope', 'aService'];

Answer 16

看看这个plunker ::这是我能想到的最简单的例子

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

Answer 17

//服务:(这里没什么特别的）

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

Answer 18

有点难看，但我已经将范围变量的注册添加到我的服务中进行切换：

myApp.service('myService', function() {
    var self = this;
    self.value = false;
    self.c2 = function(){};
    self.callback = function(){
        self.value = !self.value; 
       self.c2();
    };

    self.on = function(){
        return self.value;
    };

    self.register = function(obj, key){ 
        self.c2 = function(){
            obj[key] = self.value; 
            obj.$apply();
        } 
    };

    return this;
});

然后在控制器中：

function MyCtrl($scope, myService) {
    $scope.name = 'Superhero';
    $scope.myVar = false;
    myService.register($scope, 'myVar');
}

Answer 19

我在这里看到一些可怕的观察者模式导致大型应用程序出现内存泄漏。

我可能会有点迟，但这很简单。

如果您想观看类似数组推送的内容，手表功能会监视参考更改（原始类型）：

someArray.push(someObj); someArray = someArray.splice(0);

这将更新参考并从任何地方更新手表。包括服务getter方法。 任何原语都将自动更新。

Answer 20

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

<强>控制器

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

我认为这会做你想要的。我的控制器通过此实现继续检查我的服务的价值。老实说，这比选定的答案简单得多。

Answer 21

我编写了两个简单的实用程序服务，可以帮助我跟踪服务属性的更改。

如果你想跳过长篇解释，可以去jsfiddle

1. WatchObj
＆＃13;
＆＃13;
mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // returns watch function
  // obj: the object to watch for
  // fields: the array of fields to watch
  // target: where to assign changes (usually it's $scope or controller instance)
  // $scope: optional, if not provided $rootScope is use
  return function watch_obj(obj, fields, target, $scope) {
    $scope = $scope || $rootScope;
    //initialize watches and create an array of "unwatch functions"
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    //unregister function will unregister all our watches
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    //automatically unregister when scope is destroyed
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}
＆＃13;
＆＃13;
＆＃13;

此服务在控制器中以下列方式使用： 假设你有一个服务＆＃34; testService＆＃34;具有属性＆＃39; prop1＆＃39;，＆＃39; prop2＆＃39;，＆＃39; prop3＆＃39;。您想要观看并指定范围＆＃39; prop1＆＃39;和＆＃39; prop2＆＃39;。通过手表服务，它将如下所示：

＆＃13;
＆＃13;
app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
}
＆＃13;
＆＃13;
＆＃13;
1. 申请 观察obj很棒，但如果你的服务中有异步代码，这还不够。对于这种情况，我使用第二个看起来像这样的实用程序：
＆＃13;
＆＃13;
mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}
＆＃13;
＆＃13;
＆＃13;

我会在异步代码的末尾触发它以触发$ digest循环。 像那样：

＆＃13;
＆＃13;
app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply(); //trigger $digest loop
  }.bind(this));
}
＆＃13;
＆＃13;
＆＃13;

所以，所有这些看起来都是这样的（你可以运行它或open fiddle）：

＆＃13;
＆＃13;
// TEST app code

var app = angular.module('app', ['watch_utils']);

app.controller('TestWatch', ['$scope', 'TestService', 'WatchObj', TestWatchCtrl]);

function TestWatchCtrl($scope, testService, watch) {
  $scope.prop1 = testService.prop1;
  $scope.prop2 = testService.prop2;
  $scope.prop3 = testService.prop3;
  watch(testService, ['prop1', 'prop2'], $scope, $scope);
  $scope.test1 = function() {
    testService.test1();
  };
  $scope.test2 = function() {
    testService.test2();
  };
  $scope.test3 = function() {
    testService.test3();
  };
}

app.service('TestService', ['apply', TestService]);

function TestService(apply) {
  this.apply = apply;
  this.reset();
}
TestService.prototype.reset = function() {
  this.prop1 = 'unchenged';
  this.prop2 = 'unchenged2';
  this.prop3 = 'unchenged3';
}
TestService.prototype.test1 = function() {
  this.prop1 = 'changed_test_1';
  this.prop2 = 'changed2_test_1';
  this.prop3 = 'changed3_test_1';
}
TestService.prototype.test2 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
  }.bind(this));
}
TestService.prototype.test3 = function() {
  setTimeout(function() {
    this.prop1 = 'changed_test_2';
    this.prop2 = 'changed2_test_2';
    this.prop3 = 'changed3_test_2';
    this.apply();
  }.bind(this));
}
//END TEST APP CODE

//WATCH UTILS
var mod = angular.module('watch_utils', []);

mod.service('apply', ['$timeout', ApplyService]);

function ApplyService($timeout) {
  return function apply() {
    $timeout(function() {});
  };
}

mod.service('WatchObj', ['$rootScope', WatchObjService]);

function WatchObjService($rootScope) {
  // target not always equals $scope, for example when using bindToController syntax in 
  //directives
  return function watch_obj(obj, fields, target, $scope) {
    // if $scope is not provided, $rootScope is used
    $scope = $scope || $rootScope;
    var watched = fields.map(function(field) {
      return $scope.$watch(
        function() {
          return obj[field];
        },
        function(new_val) {
          target[field] = new_val;
        }
      );
    });
    var unregister = function unregister_watch_obj() {
      watched.map(function(unregister) {
        unregister();
      });
    };
    $scope.$on('$destroy', unregister);
    return unregister;
  };
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='test' ng-app="app" ng-controller="TestWatch">
  prop1: {{prop1}}
  <br>prop2: {{prop2}}
  <br>prop3 (unwatched): {{prop3}}
  <br>
  <button ng-click="test1()">
    Simple props change
  </button>
  <button ng-click="test2()">
    Async props change
  </button>
  <button ng-click="test3()">
    Async props change with apply
  </button>
</div>
＆＃13;
＆＃13;
＆＃13;