4

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

PSL
  • 123,204
  • 21
  • 253
  • 243
Chanthu
  • 1,794
  • 1
  • 15
  • 22
  • You don't. You only set it separated by dash, and get the attribute with camel case, while using attrs. So just do `element.attr('start-offset', val);` – PSL Oct 20 '14 at 01:49
  • Tried that. In that case, it just sets the attribute as 'start-offset' – Chanthu Oct 20 '14 at 01:54
  • Yes that is what i said.. Attribute names are case insensitive, so even if you set it as `startOffset` it will be `startoffset`, and you can get it regardless of its case. Just try setting it without jqlite wrapper, `element[0].setAttribute('startOffset', val);` as see what happens. _Why do you need it in camelcase anyways, what difference does it make?_ – PSL Oct 20 '14 at 01:55
  • Thanks. That seems to have done the trick. I want it to be in camelcase because I'm trying to set the startOffset of an svg text element and for some reason, svg needs it to be in camelcase. – Chanthu Oct 20 '14 at 02:03
  • 1
    How did that do the trick? "startOffset" will still be "startoffset". – Winnemucca Nov 21 '17 at 06:22

4 Answers4

5

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.

PSL
  • 123,204
  • 21
  • 253
  • 243
0

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.

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
0

I have created namespace in the main div:

<div class="main-wrapper" xmlns="appnamespace">...</div>

Then I inserted attribute of html-element (element) in TS code (in JS it is possible too, of course) by setAttributeNS:

element.setAttributeNS(
            'appnamespace', 'myAttribute', info.value
)

The attribute was appeared in html-template

Elena Swiderskaya
  • 21
  • 3
-1

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);
zeeshan07
  • 79
  • 5