Angular extending ui.bootstrap.progressbar to support some text on the progressbar

Question

I'm using ui.bootstrap.progressbar (code here: https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js) and I'm trying to extend it to support some custom HTML (or just text) on the progess bar. It looks something like this in 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

I'm new at directives, so I this is what I tried:

in ProgressBarController I added a label variable

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

also modified the object the controller returns to include the label. Then added the bar.label in the directive's template like so:

<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>

The progressbar appears just fine, but I cannot see the value of the label.

What am I doing wrong? Thanks in advance.

Answer 1

This turned out to be pretty straightforward.

All I had to do was:

• modify the progress directive and add transclude: true
• modify the progress.html to include an ng-transclude directive, like so

:

<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>

After this, text put between the <progressbar></progressbar> will render on the progressbar, however some CSS modifications are also needed to make the text appear in the correct position.

But every progressbar and every text needs additional positioning, so this part is still not a complete solution. Setting the wrapper's position to relative and the <span>'s to absolute is one step but still not enough.