I am currently utilizing the ui.bootstrap.progressbar (code available here: https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js) and I am attempting to enhance it by adding custom HTML or text to the progress bar. The standard Bootstrap implementation looks like this:
<div class="progress">
<div class="bar" style="width: 60%;">This thing is at 60%</div>
</div>
You can view a demo of my attempt here: http://plnkr.co/edit/WURPlkA0y6CK7HYt3GL1?p=preview
As a newcomer to directives, I made some modifications as follows:
In the ProgressBarController, I introduced a label variable.
var label = angular.isDefined($attrs.label) ? $scope.$eval($attrs.label) : '';I also updated the object returned by the controller to incorporate the label. Subsequently, I added bar.label in the directive's template like this:
<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>
Although the progressbar displays correctly, I am unable to see the value of the label.
Any insights on what might be wrong? Thank you in advance.