所有:
当我尝试使用Angular渲染一个简单的气泡图时,它一直给我一个错误:
jquery.min.js:3错误:属性cx:预期长度,"{{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>问题是在Angular绑定模型值之前渲染SVG,而形式为"{{d.cx}}的值显然不是有效值.
最简单的解决方案就是使用ng-attr-xxxSVG属性的格式.
ng-attr-cx="{{d.cx}}" ng-attr-cy="{{d.cy}}"
然后,在角度执行其第一个摘要之前,真实属性将无法获得正确的值.
您不需要使用指令.
| 归档时间： |
|
| 查看次数： |
652 次 |
| 最近记录： |