Javascript angular js peity不适用于ng repeat

用于创建我正在使用的简单饼图。这非常简单。它与js一起工作很好

html

就这样。。工作非常好，但问题在重复范围内

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

和html==>

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

0.52/1.561
不重复

---

但这对我也不起作用。我不知道为什么。有人能帮我吗…

当您创建指令时，您指定的名称是小写的

pieChart

。当您将其用作属性时，它必须在

烤肉串中

，如

饼图

AngularJS规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过指令的区分大小写的camelCase标准化名称（例如ngModel）引用指令。但是，由于HTML不区分大小写，我们在DOM中以小写形式引用指令，通常在DOM元素（例如ng模型）上使用破折号分隔的属性

---

来自Naren Murali

你能尝试使用

饼图

而不是

饼图

作为属性名吗？@nayan呃，效果很好！请检查一下谢谢@eroak。。你说得对。我拼错了指令名…@NarenMurali我还需要一点帮助。。。从那里我可以学习如何为angular编写指令…检查我的答案以获得更多解释。我希望它能对其他人有所帮助

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

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