AngularJS - 无法让计时器倒计时

Question

我正在开发一个时间管理应用，但我无法让我的计时器工作。我遇到的主要问题是通过每个函数传递 timerDuration 值，以便在计时器倒计时时自动更新 timerDisplay 。

经过几天的研究，我更加困惑。我已经阅读了Javascript文档，AngularJS文档，Mozilla的AngularJS文档，以及许多相关的StackOverflow问题和Angular / Javascript博客。

我尝试了很多方法：在工厂中使用$ scope，这不起作用（Angular有关于此的文档），将所有计时器逻辑放在控制器中（不是非常Angular），我甚至尝试构建一个自定义指令，但没有用。 Methinks我误解了一些东西，但似乎无法弄清楚它是什么。通过将计时器逻辑放在工厂服务中，我希望能够实际了解如何构建实际工作的服务。

这是我的代码：

控制器

app.controller('TimerCtrl', ['$scope', '$interval', 'CountdownClock',  function($scope, $interval, CountdownClock){

    $scope.taskTimer = function() {
        CountdownClock.timerDisplay($scope, 1500);
        $scope.start = function(){
            CountdownClock.start($scope);
        };
        $scope.stop = function(){
            CountdownClock.stop($scope);
        };
        $scope.reset = function(){
            CountdownClock.reset($scope, 1500);
        };
    };
    $scope.shortBreakTimer = function(){
        $scope.timer(300);
    };
    $scope.longBreakTimer = function(){
        $scope.timer(1800);
    };
}]);

工厂

app.factory('CountdownClock', ['$interval', function($interval){

    return {

        timerDisplay: function($scope, timerDuration){
            var scope = $scope;
            var self = this;
            scope.timerDuration = timerDuration;
            scope.seconds = '0' + parseInt(scope.timerDuration%60);
            scope.minutes = parseInt(scope.timerDuration/60);
            if(scope.seconds > 0 && scope.seconds !== 0){
                scope.seconds = '0' + scope.seconds;
            }
            if(scope.minutes == 0){
                scope.minutes = '0' + scope.minutes;
            }
        },
        start: function($scope){
            var scope = $scope;
            var self = this;
            isStopped = false;
            self.runTimer();
            console.log('start  ' + scope.timerDuration);
        },
        stop: function($scope){
            var scope = $scope;
            scope.isStopped = true;
        },
        reset: function($scope){
            var scope = $scope;
            scope.timer = new timer($scope, timerDuration);
        }, 
        runTimer: function($scope){
            var scope = $scope;
            if(self.isStopped){
                self.isStopped = false;
            }
            if(scope.timerDuration > 0){
                var interval = $interval(scope.timerDuration, 1000);
            }
            console.log('runTimer  ' + scope.timerDuration);
            if (timerDuration === 0 || self.isStopped){
                self.isStopped = true;
                $interval.cancel(interval);
            }
            scope.timerDuration--;           
        },        
        isStopped: function(){
            isStopped = true;
        }
    };
}]);

更新

我现在能够 CountdownClock 工作了。但是，它无法正常工作。经过更多的研究和故障排除后，我认为我已将其确定为 CountdownClock 工厂中的计时器功能。即使 timerDuration 的初始值作为参数传入，并且设置了范围，我也会得到 scope.timerDuration = undefined。

scope.timerDuration发生了什么？我似乎无法弄清楚这一点。

更新了控制器

app.controller('TimerCtrl', ['$scope', 'CountdownClock',  function($scope, CountdownClock){

    $scope.taskTimer = function() {
        CountdownClock.timer($scope, 1500);
        $scope.start = function(){
            CountdownClock.start($scope);
        };
        $scope.stop = function(){
            CountdownClock.stop($scope);
        };
        $scope.reset = function(){
            CountdownClock.reset($scope, 1500);
        };
    };
    $scope.shortBreakTimer = function(){
        $scope.timer(300);
    };
    $scope.longBreakTimer = function(){
        $scope.timer(1800);
    };
}]);

更新工厂

app.factory('CountdownClock', ['$interval', function($interval){

    return {
        timer: function($scope, timerDuration){
            var scope = $scope;
            scope.timerDuration = timerDuration;
            scope.seconds = '0' + parseInt(scope.timerDuration%60);
            scope.minutes = parseInt(scope.timerDuration/60);
            if(scope.seconds > 0 && scope.seconds !== 0){
                scope.seconds = '0' + scope.seconds;
            }
            if(scope.minutes == 0){
                scope.minutes = '0' + scope.minutes;
            }
            console.log('timer ' + 'scope.timerDuration = ' + scope.timerDuration);
        },
        runTimer: function($scope, timerDuration){
            var scope = $scope;
            var self = this;
            if(self.isStopped){
                self.isStopped = false;
            }
            if(scope.timerDuration > 0){
                var interval = $interval(self.timer, 1000);
            }
            if (scope.timerDuration === 0 || self.isStopped){
                self.isStopped = true;
                $interval.cancel(interval);
            }
            scope.timerDuration--;           
        },
        start: function($scope, timerDuration){
            var scope = $scope;
            var self = this;
            self.isStopped = false;
            self.runTimer($scope, timerDuration);
        },
        stop: function($scope){
            isStopped = true;
        },
        reset: function($scope){
            var scope = $scope;
            scope.timer = new timer($scope, timerDuration);
        },         
        isStopped: function(){
            isStopped = true;
        }
    };
}]);