带有角度计时器的角度 ui-bootstrap 进度条未显示值答案

【问题标题】：Angular ui-bootstrap progressbar with angular-timer not showing value带有角度计时器的角度 ui-bootstrap 进度条未显示值
【发布时间】：2014-08-14 12:32:44
【问题描述】：

请帮忙。我刚清醒过来。

见codepen here for an example。

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

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

所以，我认为使用 angular-ui-bootstrap 中的 <progressbar> 并让它在每个刻度上更新 value 也会非常好。所以，我已经做了这样的事情：

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

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

所以，我继续思考了整整两天。这可能是因为这已经两天了，我仍然不知道世界上发生了什么。无论如何，我想“嘿，也许seconds 没有reeeeeally 暴露在示波器上，所以让我们看看它是否存在，好吗？好的。” （也许自言自语没有帮助。）

所以，我开始输入这些内容：

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

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

所以，seconds 肯定暴露在作用域上。

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

任何的帮助都会像茫茫茫茫沙漠中的绿洲。

【问题讨论】：

我怀疑进度条有一个孤立的范围，你遇到了here 描述的原型继承陷阱
我也是这么想的，但这不意味着$parent.seconds 会起作用吗？因为那也行不通。我尝试在新控制器中的seconds 上添加$watch，更新属性然后使用它，但这也不起作用。我更新了pen 以反映这些情况。
另外，这意味着用 $interval 设置 $scope.value 也不起作用。但确实如此。

标签： javascript angularjs timer progress-bar angular-ui-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

在这种情况下，您不需要使用进度条指令，因为引导程序实现中没有 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，您应该使用上面的代码

【讨论】：