I'm currently working on a project in which I would like to define angular
directives composed of svg elements. As has been noted before (for instance
in a StackOverflow
question<http://stackoverflow.com/questions/13641105/including-svg-template-in-angularjs-directive?rq=1>),
svg elements present in the body of a template are not generally created
correctly within the DOM, and currently anyone wishing to do so either
needs to compile their templates manually (as in the first SO answer
above), or avoid using fragments that aren't enclosed in an <svg /> node.
jqLite being a smaller code base than jQuery, I thought I'd try examining
that code to see if I could track down any relevant parts.
Doing so, it seems like the errant bit is contained in jqLiteBuildFragment
method used in the construction of a jqLite element. Namely, it wraps all
elements in <div>s and uses the createElement() call on document, rather
than createElementNS() method that specifies the correct namespace. Quoting
the code here (recent 1.3.0 build):
function jqLiteBuildFragment(html, context) {
...
if (jqLiteIsTextNode(html)) {
...
} else {
// Convert html into DOM nodes
tmp = tmp || fragment.appendChild(context.createElement("div"));
tag = (TAG_NAME_REGEXP.exec(html) || ["", ""])[1].toLowerCase();
wrap = wrapMap[tag] || wrapMap._default;
tmp.innerHTML = wrap[1] + html.replace(XHTML_TAG_REGEXP, "<$1></$2>") +
wrap[2];
...
}
The fix appears like it might be as simple as appending the right kind of
child to the document fragment depending on the namespace of the root node
in the template. This doesn't necessarily fix a similar issue with jQuery,
but so far jqLite has sufficed for my project (at least, until I need to
add Bootstrappy things).
I'm wondering if this issue happens to be on anyone's radar screen or
docket.
Chris
p.s. so far, I've been playing around with AngularJS for a few months (and
quietly lurking about), and so I haven't chance to thank you for putting
out such a powerful framework. So, let this be it: many thanks!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
