显示AngularJS $超时进度条

Question

我有一条警告信息，我想在一段时间后隐藏。我使用$ timeout，效果很好。但是，我想在此警告框的底部添加一个小的水平倒计时（又名进度）栏，让用户知道他们的时间已用完。

AngularJS $ timeout似乎无法确定它运行了多长时间。在这种情况下，我应该如何更新我的进度条？

我像这样使用$ timeout

$timeout(function(){
  $scope.m.hideAlertMessage = true;
}, 10000)

Answer 1

您应该使用$interval每秒运行并更新计数器范围变量，当它达到10时，您可以终止间隔并执行您想做的任何事情。

E.g。

$scope.counter = 0;
$interval(function() {
    $scope.counter++;
    if($scope.counter == 10) {
        // Do whatever you wanted
    }
}, 1000, 10);

$interval的第三个参数是运行的次数。

请注意，默认情况下，这是在$scope.$apply()的迭代中运行，因此对$scope.counter的更改将立即显示在您的视图中。