绑定Angular服务以进行查看

Question

I created a countdown clock as part of a larger project. Here is the code for the service

'use strict';

angular.module('myApp')
    .service('Countdownclock', function Countdownclock() {
        var secondsRemaining = 0;
        var timerProcess;
        return {
            //initialize the clock
            startClock: function(minutes) {
                secondsRemaining = minutes * 60;
                timerProcess = setInterval(this.timer, 1000);
            },
            //timer function
            timer: function() {
                secondsRemaining -= 1;
                if (secondsRemaining <= 0) {
                    clearInterval(timerProcess);
                }
            },
            //get time
            getTime: function() {
                return secondsRemaining;
            },
            //add time
            addTime: function(seconds) {
                secondsRemaining += seconds;
            },
            //stop clock
            stopClock: function() {
                secondsRemaining = 0;
                clearInterval(timerProcess);
            }
        };
    });

Then I call it to a from a controller which is also linked to a view

'use strict';

angular.module('myApp')
    .controller('MainCtrl', function($scope, Countdownclock) {
        Countdownclock.startClock(1);
        $scope.seconds = Countdownclock.getTime();
        $scope.$watch(Countdownclock.getTime(), function(seconds) {
            $scope.seconds = Countdownclock.getTime();
        });
    });

For some reason I can't figure out how to bind secondsRemaining to $scope.seconds. I've been trying to figure this thing out for about an hour. I'm not exactly a wiz at functional programing so I have a feeling I'm just thinking about it wrong.

Answer 1

Inject $interval into your service and replace setInterval with it:

timerProcess = $interval(this.timer, 1000);

If you want to use a watcher you can register it like this:

$scope.$watch(function () { return Countdownclock.getTime(); }, function (newValue, oldValue) {
  // Might be identical when called due to initialization - Good to know for some cases
  if (newValue !== oldValue) { 
    $scope.seconds = newValue;
  }
});

Demo : http://plnkr.co/edit/usUoOtWMwoDRht27joOA?p=preview

Answer 2

You can use a function instead:

$scope.seconds = function() { return Countdownclock.getTime() };

Then remove the

$scope.$watch(Countdownclock.getTime(), function(seconds) {
    $scope.seconds = Countdownclock.getTime();
});

You can then use it in your template like this:

<div>{{seconds()}}</div>

But first, like Spock said, you have to use $interval instead of setInterval.