Implement circliful jQuery plugin in Angular

Question

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?

brodoll · Accepted Answer · 2015-05-28 19:18:32Z

2

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

edited May 28, 2015 at 19:18

brodoll

1,8815 gold badges23 silver badges27 bronze badges

answered May 28, 2015 at 18:38

Satish Jadhav

212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implement circliful jQuery plugin in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related