AngularJSでのディレクティブSVGテンプレートの機能の維持

Question

私はSPAでHTML SVGを使用しています。

私は、ディレクティブテンプレート内でSVG要素をレンダリングできないという問題が発生しました。これは、私のディレクティブがSVG名前空間内の外部要素だからだと思います。

SVG要素でmyディレクティブの機能を使用するには、回避する必要があります。 Element-Restricted-DirectiveをSVGタグ内で正当なものにするか、またはSVG要素に私のディレクティブをAttribute-Restricted-Directiveとして動的に追加するかのどちらかです。

私は現在Angularjs 1を実行していますが、私は指令テンプレート内でSVG要素（rect、ellipse、g）を使用しています。

ディレクティブDOMノードをコピーして削除し、それをSVGノードとして再作成するスタックオーバーフローポストが見つかりました。 コントローラーがまだ新しいノードにバインドされているかどうかはわかりません。

リンク： Rendering SVG templates in AngularJS directives

あなたがこれを克服するための提案を持っていますか？

Answer 1

1.3.2より新しいバージョンのAngularjsを使用すると、指示定義オブジェクトでtemplateNamespaceをsvgと宣言できます。その後trueにreplaceを設定します。

// ... 

.directive('myDir', function() { 
    return { 
     restrict: 'E', 
     templateNamespace: 'svg', 
     template: '<ellipse rx="100" ry="33" cx="50" cy="50" fill="#00ff00"/>', 
     replace: true 
    } 
}); 

これは正しくテンプレートをレンダリングします。 templateNamspaceが宣言されていない場合、htmlが仮定されます。

補足として、replaceは償却されますが、壊れません。

これは "templateNameplace" の下、ここに配置されているのドキュメント：
https://docs.angularjs.org/api/ng/service/ $

をコンパイル