user1370667 user1370667 - 1 year ago 159
Javascript Question

Circliful Plugin not working within ng repeat

I'm trying to use circliful(a jquery plugin to create a bunch of graphs within an ng repeat. However it isn't working . Will circliful not work when used within an ng repeat.

<div ng-repeat="type in types">
<div id="myStat" data-dimension="300" data-text="{{type.value}}" data-info="" data-type="half" data-width="40" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#fff" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

Any help will be appreciated. Thanks!

Answer Source

I solved this by using a directive as an attribute and triggering the circliful function on the element using the directive.

This is my markup

<div ng-repeat="type in types">
 <div data-text="{{type.value}}" data-type="half" chart></div>

This is my directive

app.directive('chart', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element) {
        $timeout(function () {
        }, 100);

The timeout is so that the chart is not drawn before the value is set.