javascript - 带有 Angular 计时器的 Angular ui-bootstrap 进度条不显示值

Question

请帮忙。我刚清醒过来。

参见 codepen here for an example .

我有一个 <timer>来自 angular-timer暴露seconds到本地范围并每秒更新一次，这非常好。像这样:

<timer> {{seconds}} </timer>

所以，我认为使用 <progressbar> 也很不错来自 angular-ui-bootstrap 并让它更新 value在每个滴答声上。所以，我做了这样的事情:

<timer>
  <progressbar value="seconds"></progressbar>
</timer>

令我惊讶的是，这不起作用。

所以，我继续思考了整整两天。这可能是因为这两天一直在努力解决这个问题，但我仍然不知道世界上正在发生什么。不管怎样，我想“嘿，也许 seconds 不是reeeeeally暴露在示波器上的，所以让我们看看它是否是，好吗？好吧。” (也许自言自语没有帮助。)

所以，我开始输入这些东西:

<timer>
  {{seconds}}
  <progressbar value="seconds"></progressbar>
</timer>

它们就在那里，在它们所有的荣耀中，秒。在我的页面上。只是不在我的进度条中。我想要他们的地方。当然。

所以，seconds绝对暴露在范围内。

然后，我想“好吧。秒在范围内。也许进度条有一个独立的范围，它没有继承 seconds 或其他东西。也许吧。但不。我不相信是这种情况。那会让太有道理了。

任何的帮助都像是茫茫挫折沙漠中的一片绿洲。

Answer 1

它不起作用，因为 没有隔离秒对象，因此没有将它暴露在其范围之外，而 隔离了值对象。
为了使其在通用范围内工作，您可以使用根据计时器定义的时间间隔触发的计时器滴答事件 - 稍后注册到此事件 Updated codepan

<div ng-controller="customCtrl">
  <timer interval="1000">
    {{seconds}}
    <progressbar value="timerSeconds"></progressbar>
  </timer>
</div>

app.controller('customCtrl', function($scope) {
 $scope.$on('timer-tick',function(e, val) {
   $scope.timerSeconds = (Math.floor(val.millis / 1000));
 }); 
});