Просмотр значений в сервисе из контроллера

Question

Просмотр значений в сервисе из контроллера

Я создал службу для изоляции бизнес-логики и внедряю ее в контроллеры, которым нужна информация. В конечном итоге я хочу, чтобы контроллеры могли наблюдать за значениями в службе, чтобы мне не приходилось делать широковещательные /on-уведомления или сложные решения для передачи сообщений, чтобы все контроллеры были уведомлены об изменениях данных в сервис.

Я создал PLNKR, демонстрирующий основную идею того, что я пытаюсь сделать.

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

Можно ли заставить контроллер следить за значениями сервиса?

18

angularjs

Источник

user1392862 09 апр '13 в 19:40

1 ответ

Решение

Другие вопросы по тегам angularjs

user1057639 09 апр '13 в 20:25 2013-04-09 20:25 · Accepted Answer · 2013-04-09 20:25

Вы уже делали это правильно. т.е. помещая сервис в переменную области видимости, а затем наблюдая за услугой как частью переменной области видимости.

Вот рабочее решение для вас:

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.
Вы не можете $ смотреть функцию, но вы можете посмотреть, что возвращает функция.