是否AngularJS处理的定制指令为HTML空元素的时候有一个bug [英] Does AngularJS have a bug when processing a custom directive for an HTML Void Element

问题描述

1. 首先，这是不是在角（@PSL）中的错误


2. 我已经离开我的下面原来的问题由于历史的目的。


3. 这不是HTML规范的错误。点击通过从下面（@zerflagL）评议一些链接后，我看到HTML规范说VOID元素是不是同义词自动闭合元件（这里是一个<一个href=\"http://stackoverflow.com/questions/13915201/what-tags-in-html5-are-acknowledged-of-being-self-closing\">SO Q＆安培;对主题的）


4. 确定，所以蹩脚的在我的部分研究工作。


5. 然而，加倍下来此，

的 HTML应该包括自我结束标记（它似乎不再那样），兄弟姐妹不应该成为奇迹般地子DOM元素（innerHTML的）。的

由于@PSL，@shaunhusain和@zeroflagL设置我直。

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

我相信我可能已经找到角的定制指令处理错误，并希望确认，以确保我没有误解的自定义指令的行为。我是新来AngularJS，所以也许我犯了一个错误。

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.

看起来当角过程的空元素上的自定义指令，发生不正当的DOM变化和同行元素下推到内部HTML等。下面是一些HTML：

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>

下面是一些JavaScript的角度：

Here's some JavaScript for Angular:

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

角处理后的DOM（需要Web浏览器的检查）是：

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>
    ...

注意两个段落标记是如何拉到voidtagtest元素中？

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.

下面是实施整个兽一个jFiddle。

Here's a jFiddle implementing the entire beast.

这是一个错误还是我失去了一些东西？如果这是一个错误，请推荐我怎么能提交一个bug与角的团队。

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.

感谢。

推荐答案

相反，previous版本的HTML 5为解析的来源和创建DOM有一套非常严格的规定。调用行为的一个错误是错误的。 说：

Contrary to previous versions HTML 5 has a set of very strict rules for parsing the source and creating the DOM. Calling the behavior a bug would be wrong. 8.2.4 of the specs says

在一个开始标记令牌发出与自闭标志设置，如果当它被树施工阶段处理是不承认的标志，这是一个分析错误。

When a start tag token is emitted with its self-closing flag set, if the flag is not acknowledged when it is processed by the tree construction stage, that is a parse error.

对于像 input标签它明确规定

确认令牌的自闭标志，如果它被设置

Acknowledge the token's self-closing flag, if it is set.

有关未知的标签（简称其他）的解析器的不可以应该承认的标志。所以浏览器是正确的，角是无辜的，我们不能使用自定义自闭的标签。如果该行为是可取的则是另一回事。

For unknown tags (referred to as "any other") the parser is not supposed to acknowledge the flag. So the browser is right, Angular is innocent and we can't use custom self-closing tags. If that behavior is desirable is another story.

BTW：我喜欢一个解析器必须如何处理嘲讽标签;）

BTW: I like how a parser must handle the sarcasm tag ;)

的结束标记的标记名称是嘲讽：深吸一口气，然后作为其它结束标记条目下方描述的行为

An end tag whose tag name is "sarcasm": Take a deep breath, then act as described in the "any other end tag" entry below.

这篇关于是否AngularJS处理的定制指令为HTML空元素的时候有一个bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！