javascript - 计数器的中间值

Question

请帮助修复脚本。 http://jsfiddle.net/k9r4t/

悬停时。 Button_hover 增加计数器的值。但当光标离开时，计数器的值会显示在屏幕上。按钮悬停。用户只能看到计数器的初始值和最终值。

我希望用户看到中间值

Controller 代码:

var app = angular.module("moduleCounter", []);

app.controller("controllerCounter", function ($scope){
    $scope.counter = 0;

    $scope.incrementCounter = function(){
        $scope.startNext = setInterval(function(){
            $scope.counter++;
        }, 400);
    }

    $scope.stopCounter = function(){
        clearInterval($scope.startNext);
    }   
});

Answer 1

使用$timeout ，它是 Angular 的原生服务:

var app = angular.module("moduleCounter", []);

app.controller("controllerCounter", function ($scope , $timeout){
    $scope.counter = 0;

    $scope.incrementCounter = function(){
       $scope.setTimeout();
    }

    $scope.setTimeout = function(){
       $scope.startNext = $timeout( $scope.counterUp , 400);
    }

    $scope.counterUp = function(){
       $scope.counter++;
       $scope.setTimeout();
    }

    $scope.stopCounter = function(){
       $timeout.cancel($scope.startNext);
    }   
});

JSFiddle:http://jsfiddle.net/cherniv/k9r4t/1/