Maintaining functionality of Directive SVG-Templates in AngularJS

Question

I'm working with HTML SVGs on a SPA.

I've run into an issue with not being able to render SVG elements within the directive template. I believe this is because my directive is a foreign element inside the SVG namespace.

I need a work around to use the functionality of my directive with SVG elements. Either by making an Element-Restricted-Directive legitimate inside SVG tags or dynamically adding my directive as an Attribute-Restricted-Directive, to a SVG element.

I am currently running Angularjs 1 and I am using SVG elements (i.e. rect, ellipse, g) within my Directive Templates.

I found a stack-overflow post that talks about copying and deleting the Directive DOM node and recreating it as an SVG node. I'm not certain if the controller will still be bound to the new node though.

Link: Rendering SVG templates in AngularJS directives

Do you have a suggestion to overcome this?

Lightfooted · Accepted Answer · 2016-05-17 13:12:25Z

1

Using any later version of Angularjs than 1.3.0, in the directive definition object you can declare the templateNamespace as svg. Then set replace to true:

// ...

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

This will render the template correctly. If no templateNamspace is declared, html is assumed.

As a side note, replace is depreciated but not broken.

The documentation on this is located here, under "templateNameplace":
https://docs.angularjs.org/api/ng/service/$compile

answered May 17, 2016 at 13:12

Lightfooted

8091 gold badge7 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Maintaining functionality of Directive SVG-Templates in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related