Setting attribute value of an element in camelCase using a directive

Question

I'm trying to add an attribute to an angularJs element from a directive like this:

element.attr('startOffset', val);

But when I check the element, the attribute added is 'startoffset' where the 'o' is not a capital letter.

Is there any way to add an attribute to an element and keep the case of the word intact?

Thanks

Answer 1

If you set an attribute using jqliteWrapper .attr or even with direct DOM operation .setAttribute it will lowercase the attribute name, before attaching to the element.

When called on an HTML element in an HTML document, setAttribute lower-cases its attribute name argument.

Since you are using SVG try direct operation with setAttribute, however setting attributes preserve their cases with SVG, not sure if jquery does any transformations internally.

 element[0].setAttribute('startOffset', val);

Plnkr

---

Confirmed that it is jquery inclusion before angular which causes it not to preserve the attribute name casing while setting it via .attr, but if you do not include jquery and angular falls back to jqLite it will set the attribute name as is, so that will work (along with attrs.$set) with SVG as well apart from the direct DOM operation.

Answer 2

This worked for me ->

var att = document.createAttribute("newName"); // Create a "newName" attribute
att.value = newName; // Set the value of the newName attribute
parent_tag.setAttributeNode(att);

Answer 3

setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name

element.setAttributeNS(namespace,name,value)

namespace is a string specifying the namespace of the attribute. name is a string identifying the attribute by its qualified name; that is, a namespace prefix followed by a colon followed by a local name. value is the desired string value of the new attribute.