javascript - ng-style 不适用于 stroke-dasharray 和 stroke-dashoffset CSS 元素

Question

通过 ng-style 传递这些值，所以:

ng-style="{'stroke-dasharray':data.value, 'stroke-dashoffset': data.value}"

打破了我的圆环图，但如果它们在应用于 div 元素的类的 CSS 中(circle_animation，请参阅 Fiddle)。这是 fiddle :

Donut chart

有什么想法吗？目标是让 ng 风格的工作，动态地传递圆周...

法比奥

Answer 1

ng-style 通常需要一个表达式，该表达式的计算结果为具有键值对的对象。它不会像您使用的那样在字符串中执行插值。您使用的方式是 ng-class 的工作方式。

要使其正常工作，您需要执行以下操作:

<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none" ng-style="{'stroke-dasharray': {{data.value}}, 'stroke-dashoffset': {{data.value}}}"/>

参见工作示例:Plunk