使用指令在驼峰式大小写中设置元素的属性值 [英] Setting attribute value of an element in camelCase using a directive

问题描述

我正在尝试从这样的指令向 angularJs 元素添加属性:

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

element.attr('startOffset', val);

但是当我检查元素时，添加的属性是startoffset"，其中o"不是大写字母.

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?

谢谢

推荐答案

如果你使用 jqliteWrapper .attr 甚至直接 DOM 操作 .setAttribute 设置一个属性，它会在附加到元素之前，小写属性名称.

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.

当在 HTML 文档中的 HTML 元素上调用时，setAttribute 将其属性名称参数小写.

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

由于您使用的是 SVG，请尝试使用 直接操作setAttribute，但是设置属性会保留它们与 SVG 的情况，不确定 jquery 是否在内部进行任何转换.

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

确认在 angular 之前包含 jquery 导致它在通过 .attr 设置时不保留属性名称大小写，但是如果您不包含 jquery 并且 angular 回退到 jqLit​​e 它会按原样设置属性名称，这样除了直接 DOM 操作之外，它也适用于 SVG(与 attrs.$set 一起).

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.

这篇关于使用指令在驼峰式大小写中设置元素的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！