AngularJS如何使用自定义HTML5元素标签和属性?

Dav*_*ine 37 javascript html5 angularjs

大多数浏览器似乎允许您创建您喜欢的任何元素标记,并将您喜欢的任何属性名称添加到元素中.例如:

<!DOCTYPE html>
<html>
<body>
<div my-attribute="has no data- prefix, but seems to behave like an attribute should">
    <br/>
    <hello-world style="display:block;background:#eee">Hello Everybody</hello-world>
    <goodby-world style="background:#faa">Default display is inline</goodbye-world>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

以上显示正常.看起来未定义的元素表现得非常像跨度.看起来AngularJS也充分利用了自定义标签和属性 - 它几乎取决于它.

但是,据我所知,做那种事情是禁止的,除了自定义html5属性带有"data-"前缀的情况.

所以,我的问题是:构成自己的自定义元素标签和/或属性名称不再是禁忌吗?换句话说,AngularJS是否依赖于非标准怪癖,而这些怪癖并不是HTML5规范的真正组成部分,但却恰好相反?谷歌有人发现了一个长期丢失的html5规范秘密章节吗?还是我完全误解了什么?

小智 17

它不会验证,但会呈现.

HTML5旨在非常宽容(与XHTML相反).这部分是因为"较旧的"HTML5浏览器可以允许新版本(以及格式错误的HTML),该版本在不破坏页面的情况下不支持该版本.

这当然可以被"利用"来引入自定义标签.

话虽这么说 - 你也可以用HTML4做到这一点.

正如评论中所提到的:您还可以为普通标记中的任何属性添加前缀,data-并且它将进行验证.

  • 我想补充一点,如果您希望页面验证,您可以简单地在属性前加上数据 - 并避免使用自定义元素,而是依赖于使用类或属性指令,您可以对页面进行验证.最终,如果它呈现/工作那是重要的.有点相关的IE兼容性http://docs.angularjs.org/guide/ie和另一个SO帖子http://stackoverflow.com/questions/16949926/w3c-validation-with-directives-in-angularjs (6认同)

Vit*_*nko 11

从W3C规范:

作者不得使用本规范或[其他适用规范] [1]不允许的元素,属性或属性值,因为这样做会使语言在将来更难扩展.

但是,虽然页面主体的初始源(在角度处理ng-app元素之前)可能不符合W3C标准,但如果使用replace: truein指令,则自定义元素将替换为模板HTML,这可能是有效的.因此,在这种情况下,您可以将角元素视为仅用终端HTML输出替换的占位符.


The*_*One 5

这有点固执己见,但主题也是如此。网络现在是我们创造的,我们有能力创建/样式/修改非规范元素。Angular 团队可能并不真正关心规格,它是最前沿的,他们允许你做你想做的事。话虽这么说,您可以使用 Angular 中的标记执行任何操作,这些标记将验证并符合 HTML5 规范(因为它们支持这两种方式)。