显示AngularJS $超时进度条 [英] Showing AngularJS $timeout progress bar

问题描述

我有，我想了一段时间后隐藏警报消息。我使用$超时和它工作得很好。不过，我想在此警报框底部增加一个小的水平倒计时（又名进度）条，让用户知道他们的时间已经不多了。

AngularJS $超时似乎并没有任何的办法，以确定它已经运行了多长时间。我应该如何在这种情况下更新我的进度？

我用的是$超时这样

  $超时（函数（）{
  $ scope.m.hideAlertMessage =真;
}，10000）
 

解决方案

您应该使用 $间隔在每秒运行和更新计数器范围变量，当它到达10你可以杀死的时间间隔，做任何你想做的事。

例如

  $ scope.counter = 0;
$间隔（函数（）{
    $ scope.counter ++;
    如果（$ scope.counter == 10）{
        //你想要什么
    }
}，1000，10）;
 

$间隔的第三个参数是次运行＃。

请注意，默认情况下这是在 $范围迭代运行。$适用（）这样的更改 $ scope.counter 将在您的视图立即可见。

I have a alert message that I want to hide after a while. I use $timeout and it works well. However, I want to add a small horizontal count-down (aka progress) bar at the bottom of this alert box to let the user know that their time is running out.

AngularJS $timeout doesn't seem to have any way to determine how long it has been running. How should I update my progressbar in this case?

I use the $timeout like this

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

解决方案

You should use $interval to run on every second and update the counter scope variable, and when it gets to 10 you can kill the interval and do whatever you wanted to do.

E.g.

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

The third argument of $interval is the # of times to run.

Note that by default this is run in an iteration of $scope.$apply() so the changes to $scope.counter will be immediately visible in your view.

这篇关于显示AngularJS $超时进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！