当我的网页上有一个持续时间计数器时，AngularJS有什么帮助吗？

我有一个使用Angular ui路由器的应用程序。当路由器被设置为某个状态时，我希望将计时器设置为例如2小时。当它被设置为另一个状态时，我想让计数器倒计时。我想在屏幕上显示剩余时间

---

有没有人有关于我如何实现这个功能的代码示例？如果有人做过类似的事情，我将非常感谢他们提供的任何建议

为此，您可以将服务和指令结合起来。服务使用cookies存储倒计时值。因此，即使在刷新之后，它也会继续计数

您可以从控制器启动或停止倒计时：

CountdownService.startCounting(3 * 30 * 1000); // milliseconds

然后在模板中显示指令的剩余时间：

<countdown></countdown>

还可以从模板更改指令的样式

---

检查我的…

我目前正在项目中为此使用倒计时服务。根据您的要求，您可以使用以下服务：

从第一页开始初始化它

app.controller('view1Ctrl', function($scope, $csCountdown){
  $csCountdown.init(2 * 3600); // 2 hours
  $scope.countdown = $csCountdown.data;
})

从第二页开始计算

app.controller('view2Ctrl', function($scope, $csCountdown){
  $csCountdown.start();
  $scope.countdown = $csCountdown.data;
})

您可以使用

countdown.stringValue

<h1>Time : {{countdown.stringValue}}</h1>

Time:{{countdown.stringValue}

你可以看到它在工作。我已经创建了带有过渡动画的view1和view2

编辑

我已经更新了，以便有一个实际的例子

最初您会看到指令页面，其中计时器初始化为2小时

然后转到问题1，计时器开始计时

从问题1开始，您可以进入帮助页面，计时器将在该页面暂停

然后你回到问题2，计时器继续计时

---

为什么不在控制器中实现它并在倒计时时重定向回去end@MaximShoustin-是的，我希望这样，但我没有看到任何例子。希望有人已经做了类似的事情，他们可以分享他们所做的。不要在控制器内做。在状态定义中使用

oneter

是否希望刷新后重新设置倒计时？如果页面刷新，我希望计数器保持当前计数。谢谢您的回答。我正在检查它是否符合我的需要。我不知道它是否符合你的确切需要，但我想你可以在这一点后扩展它…嗨，我为此开了一个赏金。希望看看其他人是否有任何解决办法。如果不是的话，我将奖励赏金。谢谢你的建议。好吧，那么我想我可以进一步扩展。您是否看到我的代码中有任何错误或明显的改进……您能解释一下这两页之间的区别吗？第一页似乎设置为两小时，并且没有更改。在我移动到另一个页面后，是否可以保留倒计时的值，并在我返回该页面时使其继续？@SamanthaJ请检查更新的plunker，在实际场景中使用倒计时服务。。。考试模拟。为什么这被接受为答案？我不认为这是错误的，但刷新后它不会保持当前计数。我以前也回答过…有没有否决的理由<代码>但刷新后不保留当前计数这是原因吗？那么，这个要求在任何地方都没有被提及。

我什么时候应该投反对票？

每当你遇到一篇非常草率、不费力气的帖子，或者一个明显而且可能是危险的错误答案时，请使用你的反对票。