AngularJS 在处理 HTML Void 元素的自定义指令时是否有错误 [英] Does AngularJS have a bug when processing a custom directive for an HTML Void Element

问题描述

更新

1. 首先，这不是 Angular (@PSL) 中的错误.
2. 出于历史目的，我将最初的问题留在下面.
3. 这不是 HTML 规范中的错误.点击下方评论者 (@zerflagL) 的一些链接后，我看到 HTML 规范说 VOID ELEMENTS 不是 SELF CLOSING ELEMENTS 的同义词(这里是 SO 问答 主题).
4. 好吧，我的研究很糟糕.
5. 不过要加倍努力:

HTML 应该包含自关闭标签(现在似乎不再包含)并且兄弟元素不应神奇地变成子 DOM 元素(innerHTML).

感谢@PSL、@shaunhusain 和 @zeroflagL 让我直截了当.

<小时>

我相信我可能在 Angular 的自定义指令处理中发现了一个错误，并希望得到确认以确保我没有误解自定义指令的行为.我是 AngularJS 的新手，所以可能我犯了一个错误.

看起来，当 Angular 在 void 元素上处理自定义指令时，会发生不正确的 DOM 更改，并且对等元素被下推到内部 HTML.这是一些 HTML:

<div ng-app="mainController"><div><voidtagtest></voidtagtest><p>示例1-保持对等</p>
<div><voidtagtest/><p>示例 2 - 变成了 innerHTML</p><p>这个也是.</p>

这是一些用于 Angular 的 JavaScript:

angular.module('myApp', []).controller('mainController', function ($scope) {$scope.message = 'a msg';}).directive('voidtagtest', function () {返回 {限制:'E'};});

Angular 处理后的 DOM(需要浏览器网页检查)为:

<代码> ...<div><voidtagtest><p>示例 2 - 变成了 innerHTML</p><p>这个也是.</p></voidtagtest>

...

注意两个 Paragraph 标签是如何被拉入 voidtagtest 元素的?

VOID ELEMENT 的 W3C 定义，如果你不知道它的语法.

这是一个实现 整个野兽的 jFiddle.

这是一个错误还是我遗漏了什么?如果这是一个错误，请推荐我如何向 Angular 团队提交错误.

谢谢.

解决方案

UPDATED

不是 AngularJS 的错误.有关所有这些的更新，请参阅问题顶部.

<小时>

好的，感谢@PSL(请参阅问题评论)，我知道这是 Angular 的已知行为.我认为没有任何正当理由可以容忍这种行为.我认为 Angular 应该解决这个问题，并在 github 上留下评论告诉他们.我把这个答案留在这里，以防其他人被这个绊倒，尽管我拒绝将其标记为已接受，因为我不接受这是正确行为的前提.希望以后的版本可以解决这个问题，有人可以在这里添加一个可以接受的正确答案.

UPDATE

1. First, this is not a bug in Angular (@PSL).
2. I've left my original question below for historic purposes.
3. This is not a bug in HTML spec. After clicking through on some links from commenters below (@zerflagL), I see that the HTML spec says that VOID ELEMENTS are not synonymous with SELF CLOSING ELEMENTS (here's an SO Q&A on the topic).
4. OK, so crappy research on my part.
5. Doubling down on this, however:

HTML should include self-closing tags (it appears it no longer does) and siblings should not magically become sub-DOM elements (innerHTML).

Thanks to @PSL, @shaunhusain and @zeroflagL for setting me straight.

---

I believe I may have found a bug in Angular's custom directive processing and would like confirmation to make sure I haven't misunderstood custom directive behavior. I'm new to AngularJS, so perhaps I've made a mistake.

It looks like when Angular processes a custom directive on a void element, an improper DOM change occurs and peer elements are pushed down to inner HTML. Here's some HTML:

<div ng-app="myApp">
    <div ng-app="mainController">
        <div>
            <voidtagtest></voidtagtest>
            <p>Example 1 - stays peer</p>
        </div>
        <div>
            <voidtagtest/>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </div>
    </div>
</div>

Here's some JavaScript for Angular:

angular.module('myApp', [])
    .controller('mainController', function ($scope) {
        $scope.message = 'a msg';
    })
    .directive('voidtagtest', function () {
        return {
            restrict: 'E'
        };
    });

The DOM after Angular processing (requires browser web inspection) is:

    ...
    <div>
        <voidtagtest>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </voidtagtest>
    </div>
    ...

Notice how the two Paragraph tags were pulled inside the voidtagtest element?

W3C definition of VOID ELEMENT, if you weren't aware of its syntax.

Here's a jFiddle implementing the entire beast.

Is this a bug or am I missing something? If it is a bug, please recommend how I can file a bug with the Angular team.

Thanks.

解决方案

UPDATED

Not an AngularJS bug. See top of question for update to all of this.

---

OK, so thanks to @PSL (see comment on question), I'm made aware that this is a known behavior with Angular. I see no valid reason for this behavior to be tolerated. I think Angular should fix this and have left a comment in github telling them so. I leave this answer here in case anyone else is tripped up by this, although I refuse to mark it as accepted as I don't accept the premise that this is proper behavior. Hopefully, some future release will fix this problem and someone can add a proper answer here that can be accepted.

这篇关于AngularJS 在处理 HTML Void 元素的自定义指令时是否有错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！