진도 표시 줄의 일부 텍스트를 지원하기 위해 각도를 확장하는 ui.bootstrap.progressbar

Question

ui.bootstrap.progressbar (코드는 여기 : https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js)이고 progess 표시 줄의 일부 사용자 정의 HTML (또는 텍스트)을 지원하도록 확장하려고합니다. . 그것은 바닐라 부트 스트랩에 다음과 같은 :

<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) : '';

또한 컨트롤러가 t를 반환하는 개체를 수정했습니다. 레이블을 포함하십시오.

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

ProgressBar를가 잘 나타납니다,하지만 난 라벨의 값을 볼 수 없습니다 : 다음과 같이 지시어의 템플릿의 bar.label을 추가했다.

내가 뭘 잘못하고 있니? 미리 감사드립니다.

편집 : 수정 된 모듈은 여기에 있습니다 : http://paste.ofcode.org/XaLxJ8pwXZQnQyw4zmTN3G

Answer 1

이것은 매우 간단 밝혀졌다.

내가해야 할 일을했을 모든했다 :

• 그렇게

처럼 ng-transclude 지시어를 포함하도록 progress.html을 수정 progress 지침을 수정하고 transclude: true

을 추가

<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>을 절대로 설정하는 것은 한 걸음이지만 여전히 충분하지는 않습니다.