ng-style不使用stroke-dasharray和stroke-dashoffset CSS元素

时间:2017-03-10 17:44:56

标签: javascript html css angularjs css-animations

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

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

打破我的圆环图,但如果它们在应用于div元素的类中的CSS中(circle_animation,请参见Fiddle)。这里的小提琴:

Donut chart

有什么想法吗?目标是让ng风格工作,以便动态地传递圆周......

的Fabio

1 个答案:

答案 0 :(得分: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