AngularJS中如何使用属性前缀“x-”和“data-”答案

【问题标题】：How are the attribute prefixes "x-" and "data-" used in AngularJSAngularJS中如何使用属性前缀“x-”和“data-”
【发布时间】：2013-02-21 18:40:27
【问题描述】：

我是 Angular 的新手，并试图理解“x-”和“data-”前缀的含义。在指令文档 (http://docs.angularjs.org/guide/directive) 中，它说这些前缀将使指令“符合 HTML 验证器”。这究竟是什么意思？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

来自 HTML5 规范：http://www.w3.org/html/wg/drafts/html/master/single-page.html

保留以两个字符“x-”开头的属性名称供用户代理使用，并保证永远不会被正式添加到 HTML 语言。

还有：

对于打算与the HTML syntax 一起使用的标记级功能，扩展名应限于“x-vendor-feature”形式的新属性，其中供应商很短标识负责扩展的供应商的字符串，功能是特征的名称。不应创建新的元素名称。使用这些属性 extensions 专门允许来自多个供应商的扩展在同一个元素上共存，这对于元素是不可能的。使用“x-vendor-feature”表单允许要进行的扩展没有与规范的未来添加冲突的风险。

【讨论】：

如果你想验证标记，我会说“x-”前缀是使用 angular 的正确方法。真的是数据。来自 W3C 草案：“对于标记级别的功能......扩展应该仅限于 'x-vendor-feature' 形式的新属性” 带有 x- 前缀的 Ng 属性非常适合这个描述。
+1。不过，这里的措辞似乎是指浏览器供应商而不是库/框架吗？无论如何，这对我来说感觉比使用数据前缀更正确，因为它比您可能想要附加的数据位更特定于框架（并且也遵循草案的 x-vendor 前缀）。
我同意 wbyoung 的观点，从字面上看，x- 是为浏览器保留的，而不是扩展或框架。但是，我也认为他们应该修改法律以包含这种用法，因为“x-ng-feature”看起来像是一个语义上正确的约定。
来自同一链接，“使用此类属性的页面根据定义是不合格的。”如果验证是使用“x-”属性的动机，那么看起来更好的是使用“数据-”

【解决方案2】：

HTML5 规范允许任意属性，只要它们以 data 为前缀，如下所示：

<div data-myattribute=""></div>

而这将是无效的 HTML5：

<div myattrbute=""></div>

For more information on data- attributes, have a look here.

至于“x-”属性，我认为您的意思是“x:”属性和元素，它们是特定于 XHTML 验证的...

为了扩展这一点，如果您（出于某种原因）要使用 XHTML，您可以像这样定义具有命名空间的自定义属性（我只是在这里总结要点）：

<html xmlns:x="http://sample.com/mynamespace">
<body>
   <div x:whatever=""></div>
   <x:mytag></x:mytag>
</body>
</html>

xmlns 中的 URL 实际上只是为了防止类似元素之间的冲突。此外，作为 DOCTYPE 声明的一部分，可以为验证目的提供自定义元素和属性的 DTD。

*浏览器中的行为会因这种 xmlns 方法而异。

不过，总而言之：对于过去三年发布的大多数浏览器，或 IE8+，您不必担心这些事情。只有在非常具体的情况下，您才会真正关心。

【讨论】：

OP 链接的文档确实表明 data-myattribute 和 x-myattribute 符合 HTML 验证器。
好吧，我不确定文档作者使用什么验证器...但 x-attribute 当前是 not in the spec。
公平地说，我确实尝试在x- 上找到更多信息，但您可以想象这个词对谷歌来说是不可能的。它主要出现在实验性浏览器功能中，例如 x-moz-errormessage 和 x-webkit-speech。
哈哈...是的，我也是这样做的，因为我想“我不记得在规范中看到过这个......这是关于什么的？”然后我查看了规范并没有看到它，所以我开始谷歌搜索。奇怪的是，上面的链接谈到 x 属性，就像它是一件很常见的事情一样。
这是否意味着 Angular 将一个名为 data-mynamespace 的属性视为简单地声明为 mynamespace？