Angular扩展ui.bootstrap.progressbar以支持进度条上的一些文本

Question

我正在使用ui.bootstrap.progressbar（代码在这里：https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js），我正在尝试扩展它以支持progess栏上的一些自定义HTML（或只是文本）。在vanilla Bootstrap中它看起来像这样：

   <div class="progress">
      <div class="bar" style="width: 60%;">This thing is at 60%</div>
    </div>

http://plnkr.co/edit/WURPlkA0y6CK7HYt3GL1?p=preview

我是指令的新手，所以我这就是我试过的：

在ProgressBarController我添加了一个label变量

var label = angular.isDefined($attrs.label) ? $scope.$eval($attrs.label) : '';

还修改了控制器返回的对象以包含标签。然后在指令的模板中添加bar.label，如下所示：

<div class="progress">
    <progressbar ng-repeat="bar in bars" 
                 width="bar.to" old="bar.from" 
                 animate="bar.animate" type="bar.type">
    </progressbar>
    {{bar.label}}
 </div>

进度条看起来很好，但我看不到标签的值。

我究竟做错了什么？提前致谢。

Answer 1

事实证明这非常简单。

我所要做的就是：

• 修改progress指令并添加transclude: true
• 修改progress.html以包含ng-transclude指令，就像这样

:

<div class="progress">
    <span ng-transclude></span>
    <progressbar ng-repeat="bar in bars" width="bar.to" old="bar.from" animate="bar.animate" type="bar.type"></progressbar>
</div>

在此之后，在<progressbar></progressbar>之间放置的文本将在进度条上呈现，但是还需要一些CSS修改以使文本显示在正确的位置。

但是每个进度条和每个文本都需要额外的定位，所以这部分仍然不是一个完整的解决方案。将包装器的位置设置为relative，将<span>设置为绝对是一步但仍然不够。