1

我正在使用ui.bootstrap.progressbar（这里的代码：https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js），我正在尝试扩展它以支持一些进度条上的自定义 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>

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

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

4

1 回答 1

0

事实证明这非常简单。

我所要做的就是：

  • 修改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 修改以使文本出现在正确的位置。

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

于 2013-10-03T00:25:30.047 回答