javascript - angular js peity 不适用于 ng-repeat

Question

为了创建一个简单的饼图，我正在使用 piety .那很简单。并且它与 js 一起工作正常。

html

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

和所需的 js--

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

就是这样 .. 工作得很好，但问题出在 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>

但这不起作用。

所以我想我可能需要一个指令..所以我做到了..

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

和 html===>

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

但这对我也不起作用。我不知道为什么。任何人都可以帮助我...

Answer 1

创建指令时，您指定的名称采用小驼峰形式 pieChart。当你用它作为属性时，它必须是kebab-case，比如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 (e.g. 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 (e.g. ng-model).

documentation

The JSFiddle来自 Naren Murali