Geek Answers Handbook

Angular SVG directive without obsolete replacement

I use many directives to draw and manage complex SVGs. Starting from 1.3. ?? the use of "substitution" in policy factories is outdated. I wonder how I can create the right SVG without using it replace: truein 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 plunk for an example of two SVG directives, one of which uses replace: trueand the other does not.

+4
source share
1 answer

Use attribute mapping 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 an SVG action<g><rect /></g>

plnkr

, svg . .

<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>
+3

More articles:


All Articles