angular js peity不適用於ng-repeat

Question

為了創建一個簡單的餅圖，我正在使用虔誠 。 這非常簡單。 和js一起工作正常。

HTML

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

並要求js--

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

多數民眾贊成它..工作得很好，但問題是在角度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

創建指令時，指定的名稱位於較低的camel-case pieChart 。 當你將它作為屬性使用時，它必須是kebab-case ，就像pie-chart一樣

AngularJS規范化元素的標記和屬性名稱，以確定哪些元素與哪些指令匹配。 我們通常通過其區分大小寫的camelCase規范化名稱（例如ngModel）來引用指令 。 但是， 由於HTML不區分大小寫 ，我們通過小寫形式引用DOM中的指令，通常使用 DOM元素上的划線分隔屬性（例如ng-model）。

文件

來自Naren Murali 的JSFiddle