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 ? stackoverflow.com/questions/24194972/… — AardVark71
– AardVark71, Commented Jan 30, 2015 at 12:45
@AardVark71 I will try this, if there is no other solution, any replace is actually removed.. — hansmaad
– hansmaad, Commented Jan 30, 2015 at 12:48

hansmaad · Accepted Answer · 2015-02-02 15:55:22Z

3

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>

answered Feb 2, 2015 at 15:55

hansmaad

19k9 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Henckel Over a year ago

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.

Collectives™ on Stack Overflow

AngularJS SVG directive without deprecated replace

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related