AngularJS SVG directive without deprecated replace

Question

I use a lot of directives to draw and manipulate a complex SVG. Since 1.3.?? the use of "replace" in directive factories is deprecated. I wonder how I should build a valid SVG without using replace: true in my directives. My directives look like this:

angular.module('app', []).directive('myRect', function() {
  return {
    restrict: 'E',
    replace: true,
    templateNamespace: 'svg',
    template: '<rect x="20" y="20" width="100" height="50" fill="blue" />'
  };
})

See this plunk for an example of two SVG directives, one using replace: true and one not.

Something like this postcompile ? http://stackoverflow.com/questions/24194972/why-is-replace-deprecated-in-angularjs#27469582 — AardVark71, Jan 30 '15 at 12:45
@AardVark71 I will try this, if there is no other solution, any `replace` is actually removed.. — hansmaad, Jan 30 '15 at 12:48

score 3 · Accepted Answer · answered Feb 02 '15 at 15:55

Use attribute matching instead. From my original example I change <my-rect-non-replace></my-rect-non-replace> to <g my-rect-non-replace></g> which results in valid SVG <g><rect /></g>

plnkr

If the template is more complex, I have to add closing tags to svg elements for some reasons. Otherwise the included code gets messed up.

<g>
<!-- Don't do this:
<line x1="-15" x2="15" y1="-25" y2="-25" />
--> 
<line x1="-15" x2="15" y1="-25" y2="-25" ></line>
<rect fill="white" width="16" height="50" x="-8" y="-25" ></rect>
<line x1="-15" x2="15" y1="25" y2="25" ></line>
</g>

Thanks for sharing. I was stuck because i didn't know about templateNamespace. I require IE11, so I am stuck with replace=true. But that's ok. — John Henckel, Apr 08 '17 at 01:48

AngularJS SVG directive without deprecated replace

1 Answers1