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

Question

我得到了我认为相当简单的 AngularJS 应用程序。我曾经在我的控制器代码中有一个简单的倒计时计时器，但我决定将它分解成自己的服务。这就是问题开始的地方。

以前，当我的定时器代码嵌入到控制器中时，countdown 范围变量显示正确 - 每一秒，它都会减少一个，直到 0，根据定时器功能。但是，现在我已经将其移至服务，并通过一些函数调用来回传递数据，countdown 变量每秒倒数 2 个数字，而不是 1 个。如果我 console.log(countdown); 在我的服务的 rundownClock() 功能中，每次通过都会显示正确的倒计时数字，但是：10,9,8,7...到 1.

谁能知道我现在做错了什么，为什么会出现这种 "double counting"？我没有在控制器中正确维护范围吗？

这是一些控制器，突出显示了相关的 CountdownService 位：

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();

    }

    }]);

这是一些有问题的服务。（不用担心一开始rounds变量的设置，与问题无关）：

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
        };
    });

最后，显示倒计时范围变量的视图片段：

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

Answer 1

更新@downvoter :

Here is a working demo（没有在 2 处路由和模板中使用控制器）

Here is the exact behavior that the author is talking about（在路由和模板中使用控制器）

我原来的回答

我认为您的 myCtrl 控制器是运行两次，所以，您的 $interval($scope.runClock, 1000); 也是运行两次 ...

正在使用注册 myCtrl 作为路由控制器并在您的模板中使用 ng-controller 吗？

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

angularjs services and controllers data out of sync

javascript

angularjs

angular-services