svg - angularJSでsvg要素を作成する

Question

angularでsvg要素を作成しようとしています。現在、ng-repeat を実行できますが、属性に値を割り当てようとするとエラーが発生します。

<g ng-repeat="cell in row">
    <rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
    <text x="10" y="10">{{cell.node.name}}</text>
</g>

十分に興味深い cell.node.name は機能し、名前はうまく表示されますが、cell.node.x と cell.node.y では、それに応じて次のエラーが表示されますエラー: 属性 x="cell.node.x" の値が無効ですエラー:属性 y="cell.node.y" の無効な値

score 24 · Accepted Answer

Angular 機能の ngAttr 属性バインディングの新しいバージョンは、Angular が起動する前にブラウザーが検証するときに発生するエラーを回避する必要があります。

例 ( Angular docsから):

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

score 0 · Accepted Answer

blesh のヒントとして: 問題を引き起こす属性のカスタムディレクティブを作成すると、Chrome でエラーが停止します。この問題の解決策はgithub にあります。

3 に答える 3