user1370667 user1370667 - 7 months ago 93
Javascript Question

Circliful Plugin not working within ng repeat

I'm trying to use circliful(a jquery plugin https://longren.io/circliful-a-jquery-plugin-providing-animated-progress-circles/) 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>
<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>
</div>
</div>


Any help will be appreciated. Thanks!

Answer

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

This is my directive

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

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

Comments