3

AngularJS を使用して SVG 属性をバインドしようとしています。形状のサイズ変更ハンドルの次のコードがあります。

// S handle.
var s_handle = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect"))
    .attr("id", "s-resize")
    .attr("x", "{{(objects['" + id + "'].w - (scope.dragHandle.width / 2))}}")
    .attr("y", "{{(objects['" + id + "'].h - (scope.dragHandle.width / 2))}}")
    .attr(scope.dragHandle)
    .attr("cursor", "s-resize")
    .call(sresize);              

$compile(s_handle.node())(scope);
element.append(s_handle);

このコードを実行すると、次のエラーが発生します。

Error: Invalid value for <rect> attribute x="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].w - (scope.dragHandle.width / 2))}}" d3.min.js:1
Error: Invalid value for <rect> attribute y="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].h - (scope.dragHandle.width / 2))}}" d3.min.js:1

問題を特定するために追加手順を削除しようとしましたが、Angular コンパイル段階の前であっても、属性xと属性を設定すると問題が実際に発生するようです。y

このメソッドtransformは、文字列をネイティブに受け入れる属性を使用して別の SVG オブジェクトで動作することに注意してください。

以前にこの問題に遭遇した人はいますか? 解決策はありますか？ありがとうございました。

編集：ステップスルーして、 $compile` は実際には要素をまったく変更していないようです。これは、要素が無効である可能性がありますか?

4

1 に答える 1

8

これはこの問題に関連していたようです: https://github.com/angular/angular.js/pull/2061

その問題でも解決しました。

SVG 要素は XML ベースのスキーマを使用し、名前空間が付けられているため、検証規則があります。特定の属性は、数値を期待するため、Angular 補間ディレクティブを取ることができません。ブラウザーは、Angular がそれをキャッチする前にこれを検証します (要素が作成され、まだ DOM に追加されていない場合でも)。

誰かがこの問題に遭遇した場合、この回答が役立つことを願っています。

于 2013-07-04T14:20:17.527 に答える