Implement circliful jQuery plugin in Angular

Question

Implement circliful jQuery plugin in Angular

I am trying to implement the jQuery plugin "circliful" in my Angular app.

To make the circliful graph work, I need to set data attributes like:

<div id="chart" data-text="30%" data-percent="30"></div>

In the JS:

$('#chart').circliful();

My problem is to integrating it with Angular Directives.
The HTML exists from page load, but the data is set later with $http (and can be changed several times).

I attempt to set the data like this:

<div id="chart" data-text="{{mydata.text}}%" data-percent="{{mydata.num}}"></div>

I guess a directive can help me here but can't figure how can I build a driective that will update the data-text and data-percent each time the scope data changes?

javascript
jquery
angularjs
jquery-plugins

Answer 1

Add delay before implementing Jquery Circliful plugin. I too had the same issue and after applying delay it worked.

Delay function:

   var delay = ( function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

Usage:

delay(function(){
    $('#chart').circliful();
}, 5000 );