CODEWITHSUNDEEP
javascriptjquerycssangularjs
Mohamed Ali JAMAOUI
Mohamed Ali JAMAOUI

Reputation: 14689

Dynamically transform in css with a parameter in angular directive

I am building a progress indicator with a circle. Where the circle is built with angular directive, and the progress level is passed as an argument to the directive where values are extracted with angular repeat.

enter image description here

the problem is that all the progress levels are getting the same value despite passing different values.

To set the update the progress level, I first tried to use jquery .css function as follows, which gave the same value for all the progress levels

$(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

Then I tried to embed the progress with ng-style into the template which also did not work, given the same progress level to all. 

<div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>

Here is the relevant portion of the code 

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

Here is the template: 

<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 am I missing?

Further infos: The circular progress bar is based on this example http://codepen.io/shankarcabus/pen/GzAfb.

Upvotes: 0

Views: 2366

Answers (2)

rdgfuentes
rdgfuentes

Reputation: 346

In my opinion all you have to do is:

  • Create a function scope.deg to provide the deg value to your view
  • Apply normal style attribute to the ppc-progress-fill in the view but using the deg() function we created below to perform the transformations.
  • Remove all jquery code

I created this plunkr for you http://embed.plnkr.co/tzPVwVue8Jhi1iIvUMJ7/preview. It does not have any styles but I'm using an image as background for the ppc-progress-fill so it's easier to note when the div rotates. Note that if you change the percent in it the AngularJs logo will rotate ;).

I usually try to keep the presentation layer (HTML and CSS) separated from the code, in this case the directive code. And not to use use jQuery if I'm working with AngularJs, most of the things you normally tend to do with jQuery can be accomplished without it. That helped me to make the switch to AngularJs faster.

Happy coding!

ps: It would be great if you can provide a working snippet/jsfiddle/plunkr/etc.. the next time so it's easier for us to help you finding the solution. ;)

Upvotes: 2

Anthony Garant
Anthony Garant

Reputation: 632

My guess would be that the this in $(this).find(...) is higher level than you think. Therefore the find() return all your .ppc-progress-fill. So the .css (...) is applied to all of them which is why all directives display the same level even if you input different values.

To be sure you target only the element associated to the directive, use the element attribute in your link function. From angular doc:

element is the jqLite-wrapped element that this directive matches.

element.find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

Upvotes: 2

Related Questions