Question

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

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

任何人都可以弄清楚我现在做错了什么，以及为什么会出现“重复计算”？我没有在控制器中正确维护范围吗？

以下是一些控制器，其中突出显示了相关的CountdownService：

rundownClock()

这是一些有问题的服务。（不要担心开始时的回合变量设置，它与问题无关）：

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

    }

    }]);

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

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

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服务和控制器数据不同步

1 个答案: