从控制器监视服务中的值

一尘不染

从控制器监视服务中的值

angularjs

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

我创建了一个plnkr，展示了我要执行的操作的基本概念。

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

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

阅读 252

2020-07-04

共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一个函数，但是可以观察该函数返回的内容。

2020-07-04