angularjs 服务和控制器数据不同步

Question

I've got what I thought was a fairly simple AngularJS application. I used to have a simple countdown timer in my controller code, but I decided to break it out into its own service. That's where the problems began.

Previously, when my timer code was embedded within the controller, the countdown scope variable displayed correctly - every second, it would count down one less, until 0, as per the timer function. However, now that I've moved this to a service, and been passing the data back and forth with some function calls, the countdown variable counts down 2 numbers every second, rather than 1. If I console.log(countdown); in my service's rundownClock() function, the correct countdown number is displayed each pass, however: 10,9,8,7...to 1.

Can anyone figure out what I'm now doing wrong, and why this "double counting" is occurring? Am I not maintaining the scope correctly in the controller?

Here is some of the controller, with the relevant CountdownService bits highlighted:

myApp.controller('myCtrl', ['$scope', 'CountdownService', function($scope, CountdownService) {

    // TIMER SERVICES
    $scope.startTimer = CountdownService.startTimer;

    $scope.runClock = function () {

        $scope.updateCountdown();

        if (($scope.countdown > 0) && ($scope.roundStarted == true)) {
            CountdownService.rundownClock($scope.countdown);
        }
    };

    $interval($scope.runClock, 1000);

    $scope.updateCountdown = function () {

        CountdownService.setCurrentRound($scope.currentRound);
        $scope.countdown = CountdownService.getCountdown();
        $scope.roundStarted = CountdownService.getRoundStarted();

    }

    }]);

Here's some of the service in question. (Don't worry about the rounds variable set-up at the beginning, it's not relevant to the problem):

myApp
    .factory("CountdownService", function (gameSetUp) {

        var rounds = gameSetUp.rounds,
            roundStarted = false,
            roundFinished = false,
            currentRound = 0,
            countdown = rounds[currentRound].time;

        // grab the round from the controller's scope to set the current round
        function setCurrentRound(round) {
            currentRound = round;
        }

        function getRoundStarted() {
            return roundStarted;
        }

        function getCountdown() {
            return countdown;
        }

        function startTimer() {
            roundStarted = true;
        }

        function rundownClock() {

            if (roundStarted === true) {

                if (countdown > 0) {
                    countdown = countdown - 1;
                }

                if (countdown === 0) {
                    roundFinished = true;
                }
            }
        }

        return {
            startTimer: startTimer,
            rundownClock: rundownClock,
            getCountdown: getCountdown,
            getRoundStarted: getRoundStarted,
            setCurrentRound: setCurrentRound
        };
    });

And finally, a snippet from the view, where the countdown scope variable is displayed:

<div class="timer md-body-2">{{ countdown }} seconds</div>

Answer 1

Update @downvoter :

Here is a working demo ( without using controller in 2 places route and template)

Here is the exact behavior that the author is talking about ( using controller in route and template )

My original answer

I think your myCtrl controller is running twice, so, your $interval($scope.runClock, 1000); is running twice also ...

Are using registering myCtrl as route controller and in your template with ng-controller ?