Angular ui-bootstrap的progressbar带Angular -timer不显示值

Angular ui-bootstrap progressbar with angular-timer not showing value

本文关键字：Angular 显示 -timer ui-bootstrap progressbar      更新时间：2023-09-26

请帮忙。我刚失去理智。

参见此处的codepen示例。

我有一个来自角定时器的<timer>，它将seconds暴露到本地范围并每秒更新一次，这非常好。像这样:

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

所以，我认为它也会很好，然后使用一个<progressbar>从角ui引导，并让它更新value在每个tick。所以，我做了这样的事情:

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

令我惊讶的是，这行不通。

所以，我继续思考了整整两天。这可能是因为我花了两天时间在这上面，但我仍然不知道到底发生了什么。不管怎样，我想"嘿，也许seconds在瞄准镜上并没有真的曝光，所以让我们看看它是否曝光了，好吗?"好吧。"(也许自言自语是没有用的。)

所以，我继续输入这些东西: 
<timer>
  {{seconds}}
  <progressbar value="seconds"></progressbar>
</timer>

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

因此，seconds在作用域上肯定是暴露的。

然后，我想"好吧。"秒在瞄准镜上。也许progressbar有一个孤立的作用域，没有继承seconds或其他东西。也许吧。但是没有。我认为情况并非如此。那太有道理了。

任何的帮助就像浩瀚的挫折沙漠中的绿洲。

不工作，因为没有隔离seconds对象，因此不会将其暴露在其作用域之外，而隔离值对象。
要使其在公共范围内工作，您可以使用timer-tick事件，该事件根据计时器定义的间隔触发，并稍后注册到该事件更新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));
 }); 
});

在这种情况下你不需要使用progressbar指令，因为在引导实现中没有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文档中给出的例子将不起作用。对于bootstrap 3，应该使用

上面的代码
相关文章：