Angular ui-bootstrap进度条，角度计时器不显示值

Question

请帮忙。 我出于理智而感到新鲜。

有关示例，请参见codepen 。

我有一个来自angular-timer的<timer> ，它将seconds暴露给本地范围并每秒更新一次，这非常好。 像这样的东西：

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

所以，我认为从angular-ui-bootstrap中使用<progressbar>并让它更新每个tick上的value也是相当不错的。 所以，我已经完成了这样的事情：

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

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

所以，我继续思考它似乎整整两天。 那可能是因为已经有两天的时间了，我仍然不知道世界上到底发生了什么。 无论如何，我想：“哎，可能在某种程度上seconds不reeeeeally暴露的范围，让我们看看它是，OK？OK。” （也许和自己说话没有帮助。）

所以，我继续输入这些东西：

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

在他们的荣耀中，他们就是秒。 在我的页面上。 只是不在我的进度栏中。 我想要他们的地方。 当然。

因此， seconds肯定会暴露在范围内。

然后，我认为“好吧。秒数就在范围内。也许进度栏有一个孤立的范围，不会继承seconds或者其他东西。也许。但是没有。我不相信这种情况。这太有意义了。

任何帮助都会像是一片茫茫荒芜的绿洲。

Answer 1

它不起作用，因为<timer />不隔离秒对象，因此不会将其暴露到其范围之外，而<progressbar />隔离值对象。
要使它与公共范围一起使用，您可以使用根据计时器定义的间隔触发的timer-tick事件 - 并在以后注册到此事件更新的代码扩展

<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));
 }); 
});

Answer 2

在这种情况下，您不需要使用progressbar指令，因为bootstrap实现中没有javascript：

<timer start-time='start' end-time='end'">
   <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:{{ 100 - (100 * millis/(endTime - startTime)) | number:0}}%;">
      </div>
   </div>
 </timer>

注意：如果使用bootstrap 2，angular-timer docmentation中给出的示例不起作用。对于bootstrap 3，您应该使用上面的代码