使用指令以驼峰命名法设置元素的属性值

Question

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

element.attr('startOffset', val);

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

有什么方法可以向元素添加属性并保持单词大小写不变吗？

谢谢

Answer 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 操作之外，它还可以（与

attrs.$set

一起）与 SVG 一起使用。

Answer 2

setAttributeNS 添加新属性或更改具有给定命名空间和名称的属性值

element.setAttributeNS(命名空间,名称,值)

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

Answer 3

我在主 div 中创建了命名空间：

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

然后我通过setAttributeNS在TS代码中插入html-element（元素）的属性（当然在JS中也可以）：

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

该属性出现在html-template中

Answer 4

这对我有用->

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