在 AngularJS 中创建一个简单的计时器

Creating a simple timer in AngularJS

本文关键字：一个 简单 计时器 AngularJS 创建      更新时间：2023-09-26

我有一个输入字段，我想显示一个简单的计数器（每秒更新）。

<input class="form-control input-lg" type="text" placeholder="00" ng-model="ss">

每个启动/停止按钮在控制器中都有关联的ng-click方法

视图

<button ng-click="start()">Start</button>

我可以在控制器功能中完成计数器吗？

$scope.start = function() {
};

我尝试过这样的事情

$scope.start = function() {
    if($scope.counting === true) return false;
    $scope.counting = true;
    $scope.counter = setInterval($scope.updateCount, 1000);
};
$scope.updateCount = function() {
    $scope.ss++;
}

但是，当调用 start 函数时，该值不会不断更新输入ng-model='ss'。它只是将其设置为 1，然后间隔似乎不会继续更新。

还是需要创建服务？如果是这样，有人可以指出我正确的方向，说明需要如何设置该服务，以便将更新计数值返回给控制器。

像往常一样，任何帮助都值得赞赏。

您需要

在setInterval回调中使用$scope.$apply()，以便更新值。 

$scope.updateCount = function() {
    $scope.ss++;
    $scope.$apply();
}

通常建议使用$timeout而不是setInterval（因为它可以防止需要$apply），这里有一个好方法：https://stackoverflow.com/a/14238039/1266600。

相关文章：