使用指令在 camelCase 中设置元素的属性值答案

【问题标题】：Setting attribute value of an element in camelCase using a directive使用指令在 camelCase 中设置元素的属性值
【发布时间】：2014-10-20 01:45:00
【问题描述】：

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

element.attr('startOffset', val);

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

有没有什么办法可以给元素添加属性并保持单词大小写不变？

谢谢

【问题讨论】：

你没有。您只需将其设置为用破折号分隔，并在使用 attrs 时使用驼峰式大小写获取属性。所以就做element.attr('start-offset', val);
试过了。在这种情况下，它只是将属性设置为 'start-offset'
是的，我就是这么说的。。属性名称不区分大小写，所以即使您将其设置为startOffset，它也将是startoffset，无论大小写如何，您都可以获得它。只需尝试在没有 jqlite 包装器的情况下设置它，element[0].setAttribute('startOffset', val); 看看会发生什么。 为什么你还需要它在驼峰箱中，它有什么区别？
谢谢。这似乎成功了。我希望它采用驼峰式，因为我正在尝试设置 svg 文本元素的 startOffset，并且由于某种原因，svg 需要它采用驼峰式。
这是怎么做到的？ “startOffset”仍将是“startoffset”。

标签： javascript html angularjs angularjs-directive

【解决方案1】：

如果您使用 jqliteWrapper .attr 或直接使用 DOM 操作 .setAttribute 设置属性，它将在附加到元素之前将属性名称小写。

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

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

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

Plnkr

确认它是在 angular 之前包含 jquery 导致它在通过.attr 设置它时不保留属性名称大小写，但是如果您不包含 jquery 并且 angular 回退到 jqLite，它将按原样设置属性名称，因此除了直接的 DOM 操作之外，它还可以与 SVG 一起使用（与 attrs.$set 一起）。

【讨论】：

【解决方案2】：

setAttributeNS 添加一个新属性或使用给定的命名空间和名称更改属性的值

element.setAttributeNS(namespace,name,value)

namespace 是一个字符串，用于指定属性的命名空间。 name 是一个字符串，通过其限定名称标识属性；也就是说，命名空间前缀后跟冒号，后跟本地名称。 value 是新属性所需的字符串值。

【讨论】：

【解决方案3】：

这对我有用->

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

【讨论】：