Question

所有

当我尝试使用Angular渲染一个简单的气泡图时，它会一直给我一个错误：

jquery.min.js：3错误：属性cx：预期长度，＆＃34; {{d.cx}}＆＃34;

但渲染结果是正确的，我想知道这是怎么发生的以及如何避免这些错误？

我的代码就像：

＆＃13;

	var app = angular.module("vp", []);
	app
	  .controller("main", function($scope) {
	    $scope.data = [{
	      cx: 200,
	      cy: 200
	    }, {
	      cx: 100,
	      cy: 100
	    }]
	  })

＆＃13;

<!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>

＆＃13;

Answer 1

问题是在Angular绑定模型值之前SVG会被渲染，而＃34; {{d.cx}}形式的值显然不是有效值。

最简单的解决方案就是为您的SVG属性使用ng-attr-xxx格式。

ng-attr-cx="{{d.cx}}" ng-attr-cy="{{d.cy}}"

然后真正的属性不会得到正确的值，直到angular执行了它的第一个摘要。

您不需要使用指令。

Answer 2

这是一个svg角度怪异其他人有问题，并提出了解决方案。见Use svg with angularjs ng-repeat

Angular指令在正确呈现时报告有关SVG属性的错误

2 个答案: