angularjs – 从控制器看服务中的值

我创建了一个隔离业务逻辑的服务,并将其注入到需要信息的控制器中.我最终要做的是让控制器能够观察服务中的值,以便我不需要进行广播/通知或复杂的消息传递解决方案,让所有的控制器被通知数据的更改服务.

我创建了一个plnkr,展示了我正在努力做什么的基本想法.

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

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

你已经在做正确了即将服务推送到作用域变量中,然后将该服务作为范围变量的一部分进行观察.

这是您的工作解决方案：

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,这是一个异步操作,你必须让角度知道事情发生了变化.这就是为什么你需要$rootScope.$apply.>你不能看一个函数,但你可以看到函数返回的.

angularjs – 从控制器看服务中的值

猜你在找的Angularjs相关文章