AngularJS中如何使用属性前缀“x-”和“data-”
Posted
技术标签:
【中文标题】AngularJS中如何使用属性前缀“x-”和“data-”【英文标题】：How are the attribute prefixes "x-" and "data-" used in AngularJS 【发布时间】：2013-02-21 18:40:27 【问题描述】：我是 Angular 的新手，并试图理解“x-”和“data-”前缀的含义。在指令文档 (http://docs.angularjs.org/guide/directive) 中，它说这些前缀将使指令“符合 html 验证器”。这究竟是什么意思？
【问题讨论】：
【参考方案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？以上是关于AngularJS中如何使用属性前缀“x-”和“data-”的主要内容，如果未能解决你的问题，请参考以下文章
ngf 前缀在 angularjs 和 ng-file-upload 中是啥意思？