angular UI Bootstrap：点击进度条？

Question

我正在尝试使用引导UI 进度条组件来显示音频播放器的已用时间。

我想知道是否有办法将进度条绑定到用户操作（如ng-click）并返回点击“点击”的新值。这应该有助于我为音频播放器实现搜索功能。

任何建议都将不胜感激。

Answer 1

I don't think bootstrap UI progress bar provides feature you want. But you can implement seek function by using offsetX or offsetY of MouseEvent.

Answer 2

以这种方式实施：

模板：

<div ng-click="tracksCtrl.handleProgressBarClick($event)">
  <progressbar value="tracksCtrl.playingProgress" type="danger"></progressbar>
</div>

控制器代码的一部分：

handleProgressBarClick: function(e) {
  var fullProgressBarWidth = $(e.currentTarget).width();
  var requestedPosition = e.offsetX / fullProgressBarWidth * 100;
  setPlayerPercent(requestedPosition);
}