全部:
当我尝试使用 Angular 渲染一个简单的气泡图时，它不断给我错误，例如:
jquery.min.js:3 Error: attribute cx: Expected length, "{{d.cx}}".
但是渲染结果是正确的，我想知道这是怎么发生的以及如何避免这些错误？
我的代码是这样的:
var app = angular.module("vp", []);
app
.controller("main", function($scope) {
$scope.data = [{
cx: 200,
cy: 200
}, {
cx: 100,
cy: 100
}]
})<!DOCTYPE html>
<html ng-app="vp">
<head>
<title></title>
</head>
<body ng-controller="main">
<svg width="300" height="300">
<g>
<circle ng-repeat="d in data track by $index" cx="{{d.cx}}" cy="{{d.cy}}" fill="red" r="25"></circle>
</g>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>最佳答案
问题是 SVG 在 Angular 绑定(bind)模型值之前被渲染，而“{{d.cx}}”形式的值显然不是有效值。
最简单的解决方案就是使用 ng-attr-xxx SVG 属性的格式。
ng-attr-cx="{{d.cx}}" ng-attr-cy="{{d.cy}}"
然后，直到 angular 执行了它的第一个摘要，真正的属性才会得到正确的值。
您不需要使用指令。
关于angularjs - Angular 指令在正确渲染时报告有关 SVG 属性的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37623362/