AngularJS : Transcluding SVG elements in directives -

I am interested in creating a composite SVG by composing the reusable graphical elements wrapped inside Angular.js instructions. For example, I might have:

  & lt; Div ng-app = "svgApp" & gt; & Lt; Canvas & gt; & Lt; Drawing ng-repeat = "i [1,2,3]" cy = "{{i * 40}}" & gt; & Lt; / Drawing & gt; & Lt; / Canvas & gt; & Lt; / Div & gt;   
 Where I am defining the following instructions:  
  .directive ('canvas', function () {return {template:' & lt; Svg height = 200 width = 100 ng-transclude & gt; & lt; / svg & gt; banned: 'e', ​​replace: true, transclude: true};}) Directive ('drawing', function) ({{template: & lt; circle cx = 50 r = 15 & gt; & lt; / circle & gt; restrict: 'e', ​​replace: true};} )   
 The problem is that the SVG element is properly passed, a clue seems to be that it is mostly because SVG nodes have not been properly formed within the angular.  
 After moving forward, I had to replace the appropriate DV elements with the proper SVG nodes, one:  
  .value ('createSVGNode', function ( Name, element, settings) {var namespace = 'http://www.w3.org/2000/svg'; var node = ElementN (namespace, name); (var attribute in settings) {var value = Settings [attribute]; if (value! == zero & amp;! Attribute.match (/ \ $ /) & value! == 'string' || value! == '')) {Node.setAttribute (attribute, value);}} return node;});   
 However, it seemed untouchable that I would need to use it everywhere, and I wanted to put the bug locally locally as a solution, as long as It does not matter.  
 My question is that the following would be a proper solution:  
  Angular. ForEach ([ 'circle', ...], function (svgElem) {svgModule. Directive (SvgElem, function (CreateSVGNode) {return {ban 'e', ​​link: function (scope, elements, Etters) {var node = Create SVGNode (SVGilem, Element, ethers); angular.liment (node) .Append (Element [0].); Element.replace with (node);}}}})}};   
 And it works!  
 Is it valid for me to redefine the existing SVG element directives in this form?   
 
 
 The above is a potential approach that you can not take the tip of the active development of your code Apangul Ajenjr 1.3 It is the issue of crossing the elements of different namespace (eg SVG or Mathhel).  
 shows the links that your code will determine precisely how key adds a new "templateNamespace" key to direct definition object:  
  .directive ( 'svgInternal' , function () {return {templateNamespace: 'svg', template: '& Lt; g & gt; & lt; Ritk height = "25" width = "25" /> gt; "x" = "30" y = "20" & gt; Hello, World  & lt; / g & gt;: 'e', ​​Replace: True};})   
 Where displays SVG-type instructions in the following markup using:  
  & lt; Svg height = "30" & gt; & Lt; Svg-internal & gt; & Lt; / Svg-internal & gt; & Lt; / Svg & gt;   
  Edit : Since 1.3.beta.19 the "type" was changed to "Template namespace".