angular js peity不适用于ng-repeat

Question

for creating a simple pie chart i am using piety . that is very much simple . and its working fine with js.

html

<span class='pie' data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}'>0.52/1.561</span>

and required js--

$(".pie").peity("pie");

thats it .. works very fine but problem is within angular js ng-repeat.

<div ng-repeat='item in data'>
     <span class='pie' data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}'>{{item.start}}/{{item.end}}</span>
</div>

but that is not working.

so i thik that may be i need a directive..so i made it..

app.directive('pieChart', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element) {
        $timeout(function () {
            element.peity("pie")
        }, 100);
    }
};
});

and html===>

<td><span data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}' pieChart>0.52/1.561</span></td>
without ng-repeat

but that is also not working for me . i dont know why.can anybody help me...

Answer 1

When you create a directive, the name you specify is in lower camel-case pieChart . When you use it with as an attribute, it must be in kebab-case , like pie-chart

AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (eg ngModel). However, since HTML is case-insensitive , we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (eg ng-model).

documentation

The JSFiddle from Naren Murali