jQuery Angularjs ng-repeat에서 작동하지 않는 스파크 라인 막 대형 차트

Question

jquery.sparkline.js를 사용하여 HTML 표에 막 대형 차트를 표시하려고합니다. 그러나 ng-repeat를 사용하는 순간 스파크 라인이 작동하지 않습니다.

<tr ng-repeat='x in [1]'> 
    <td>{{x}}</td> 
    <td>33</td> 
    <td> 
     <span class="dynamicbar">Loading..</span> 
    </td> 
</tr> 

는 u는 볼 때 더미 데이터하지만 아무 것도 NG-반복,하지만 내가 사용 후 나의 스파크 렌더링하지 않는 NG를-반복합니다. 내가이 옵션을 원한다면 다른 행을 가진 html 테이블에 다른 데이터가 있으므로 테이블 열 중 하나에서 barchart가 필요합니다. 여기

는 plunker입니다 :

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

우리가 NG 반복 및 막대 차트가

을 보여줍니다 제거하면 plunker 작동

사람은 NG 반복을 사용하여이 작업을하고 결합시킬 것을 도울 수있다 막대 차트.

Answer 1

Angular 컨트롤러에서 jQuery 플러그인을 초기화하지 마시기 바랍니다. 컴파일 및 렌더링으로 인해 이후 HTML 요소가 DOM에 존재한다는 보장이 없기 때문입니다.

app.directive('dynamicbar', function() { 
    return { 
    scope: { 
     data: '=' 
    }, 
    link: function(scope, element) { 
     element.sparkline(scope.data, { 
     type: 'bar', 
     barColor: 'green', 
     width: 300, 
     height: '50', 
     barWidth: 8, 
     barSpacing: 3, 
     colorMap: ["green", "yellow", "red"], 
     chartRangeMin: 0 
     }); 
    } 
    } 
}) 

및 템플릿에 사용 : 대신 간단한 지침을 만들

<tr ng-repeat='x in items'> 
    <td>22</td> 
    <td>33</td> 
    <td> 
     <span dynamicbar data="x.bars">Loading...</span> 
    </td> 
</tr> 

데모 : 물론http://plnkr.co/edit/6wO6zKcRYdtrN6Xmbj9E?p=preview