Question

用于创建一个简单的饼图我正在使用piety。这非常简单。和js一起工作正常。

HTML

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

并且需要js -

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

多数民众赞成它......工作得非常好，但问题在于角度重复。

<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 ===＆gt;

<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规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的camelCase 规范化名称（例如ngModel）来引用指令。但是，因为HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model））。

documentation

来自Naren Murali的

The JSFiddle

angular js peity不适用于ng-repeat

1 个答案: