I am currently working on creating a progress indicator using a circular design. In this setup, the circle is generated through an Angular directive, with the progress level being passed as an argument to the directive and values extracted using an Angular repeat method.
https://i.sstatic.net/VlNfN.png
However, I am encountering an issue where all the progress levels are receiving the same value despite passing different values for each.
In an attempt to update the progress level, I initially experimented with using jQuery's .css function like so, but it ended up assigning the same value to all progress levels:
$(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
Subsequently, I tried embedding the progress styling using ng-style directly into the template, but that also resulted in all progress levels showing the same value.
<div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>
The code snippet below showcases the relevant sections of the code structure:
AppModule.directive("skillWidget", function(){
var linkFunction = function(scope, element, attributes){
//console.log(attributes);
scope.text = attributes["text"];
scope.percent = attributes["percent"];
percent = parseInt(scope.percent),
deg = 360*percent/100;
//console.log($(this).find('.ppc-progress-fill'));
$(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
//$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
};
return {
restrict: "E",
templateUrl:"views/skillTemplate.html",
link: linkFunction,
scope: {
text: "@text",
percent : "@percent"
}
}
});
Below is the template structure:
<div class="progress-pie-chart"><!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>{{text}}</span>
</div>
</div>
What could be causing this inconsistency?
Additional information: The circular progress bar design is based on this example http://codepen.io/shankarcabus/pen/GzAfb.