在处理HTML Void元素的自定义指令时,AngularJS是否存在错误

And*_*ips 8 html javascript angularjs angularjs-directive

UPDATE

  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="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>
Run Code Online (Sandbox Code Playgroud)

这是Angular的一些JavaScript:

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

Angular处理后的DOM(需要浏览器Web检查)是:

    ...
    <div>
        <voidtagtest>
            <p>Example 2 - becomes innerHTML</p>
            <p>this one, too.</p>
        </voidtagtest>
    </div>
    ...
Run Code Online (Sandbox Code Playgroud)

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

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

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

这是一个错误还是我错过了什么?如果它是一个错误,请建议我如何向Angular团队提交错误.

谢谢.

And*_*ips 2

更新

不是 AngularJS 错误。请参阅问题顶部以了解所有这些内容的更新。


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

  • 你好,安德鲁,很高兴你在这里找到了一些解决办法,尽管你仍然认为这是一个 Angular 问题。根据阅读 PSL 上面链接的讨论,尽管这似乎是 Web 浏览器中 HTML 解析器的问题,而不是 Angular 本身的问题。问题是浏览器将在 Angular 有机会传递 HTML 来平滑这样的事情之前解释/解析 HTML。所以我认为他们关闭了这个错误,因为它无法在 Angular 或任何其他 JS 框架本身中修复,而是一个浏览器错误。 (2认同)