从控制器观察服务中的值答案

【问题标题】：Watching a values in a service from a controller从控制器观察服务中的值
【发布时间】：2013-04-09 19:40:09
【问题描述】：

我创建了一个服务来隔离业务逻辑，并将其注入到需要信息的控制器中。我最终想要做的是让控制器能够观察服务中的值，这样我就不必进行广播/通知或复杂的消息传递解决方案来通知所有控制器数据的变化服务。

我创建了一个 plnkr，展示了我正在尝试做的基本想法。

http://plnkr.co/edit/oL6AhHq2BBeGCLhAHX0K?p=preview

是否可以让控制器监视服务的值？

【问题讨论】：

我的反对意见是因为 plunker 不见了，代码也不见了，这使得这个问题（和答案）毫无用处。 :( 把代码放在这里，我会 +1 你的问题。

标签： angularjs

【解决方案1】：

你已经做对了。即将服务推送到范围变量中，然后将服务作为范围变量的一部分进行观察。

这是适合您的工作解决方案：

http://plnkr.co/edit/SgA0ztPVPxTkA0wfS1HU?p=preview

HTML

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.3/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <button ng-click="start()">Start Count</button>
  <button ng-click="stop()">Stop Count</button>
  ControllerData: {{controllerData}}
</body>
</html>

Javascript：

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

app.service('myService', function($rootScope) {
  var data = 0;
  var id = 0;

  var increment = function() {
    data = data + 1;
    $rootScope.$apply();
    console.log("Incrementing data", data);
  };

  this.start = function() {
    id = setInterval(increment, 500) ;

  };

  this.stop = function() {
    clearInterval(id);
  };

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

}).controller('MainCtrl', function($scope, myService) {
  $scope.service = myService;
  $scope.controllerData = 0;

  $scope.start = function() {
    myService.start();
  };

  $scope.stop = function() {
    myService.stop();
  };

  $scope.$watch('service.getData()', function(newVal) {

    console.log("New Data", newVal);
    $scope.controllerData = newVal;
  });
});

以下是您错过的一些内容：

$scope.$watch 中的变量顺序错误。它是 (newVal,oldVal) 而不是相反。
由于您使用的是 setInterval ，这是一个异步操作，您必须让 Angular 知道事情发生了变化。这就是您需要 $rootScope.$apply 的原因。
您不能 $watch 函数，但可以查看函数返回的内容。

【讨论】：

朋克代码不见了（或者我看不到它）。请将答案的内容放在这里，而不是放在第 3 方网站上以获得您的 +1。
@BernhardHofmann++。我已经很久没有点击过有效的 plnkr 了。
请注意，您可以使用 Angular 的 $interval，这样就不再需要 $rootScope.$apply()
我正在使用 requestAnimationFrame 和 $rootScope.$apply();为我修好了。谢谢！
我真的不喜欢那样。所以你会到处观察每一个这样的变量。这个问题的答案很好，但这是一个不好的方法。我认为他应该将 data 和 id 放在一个对象中。如果控制器从服务中调用方法，只需在每个 setMethod 上返回单个对象，因此无需 watch 也无需发出。如果指令更改了单个对象并且我们需要通知控制器，只需触发从服务到控制器的广播事件，我不知道您为什么想要，这不是“复杂消息”。但是不要再看一切了！！！