发表新帖
发表新帖

AngularJS element directives not displaying when using self-closing tags

前端 未结
关注
3 1929
情歌与酒
情歌与酒 2020-12-06 04:43

I have in my html file directives

and the directives are on the form

.directive(\'add\', [\'$w
相关标签:
3条回答
  • 星月不相逢
    2020-12-06 04:58

    To lay your question to rest, I am quoting the official statement from the AngularJS team: (sic)

    self-closing or void elements as the html spec defines them are very special to the browser parser. you can't make your own, so for your custom elements you have to stick to non-void elements (<foo></foo>).

    this can't be changed in angular.

    - IgorMinar

    source: https://github.com/angular/angular.js/issues/1953#issuecomment-13135021

    Follow the rest of the conversation on AngularJS issue's page where they discuss the possibility of using XHTML for delivering content with self-closing tags that is acceptable to the browser. However do note that it is not fully supported by AngularJS.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-06 04:59

    HTML spec does not allow self-closing tags on non-void elements.

    HTML syntax rules [W3C]

    Elements have a start tag to indicate where they begin. Non-void elements have an end tag to indicate where they end.
    Start tags consist of the following parts, in exactly the following order:

    1. A "<" character.
    2. The element’s tag name.
    3. Optionally, one or more attributes, each of which must be preceded by one or more space characters.
    4. Optionally, one or more space characters.
    5. Optionally, a "/" character, which may be present only if the element is a void element.
    6. A ">" character.

    There is a limited number of void elements in HTML5 spec. Here is the complete list:

    area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

    What's really going on

    The browser's parser has to listen to the spec. Since using the slash in a non-void element tag is invalid, the parser ignores the ending />, and <back /> means <back>. Therefore you are never closing the first element which prevents the others to work.

    On Plunker you have:

    <body>
   <back></back>
   Self closing <back />
   Self closing <back />
</body>

    which parses into

    <body>
   <back></back>
   Self closing <back>
      Self closing <back>
    </back>
  </back>
</body>

    You then specify template: '<button>back</button>' on your directive which replaces back (and it's children) with the specified HTML resulting in:

    <body>
   <back>
       <button>back</button>
   </back>
   Self closing <back>
       <button>back</button>
   </back>
</body>

    What should I do then?

    Use <back></back> for all and it will work fine. Alternatively you could use element attributes: <div back="attr"></div>.

    See the following discussions for more details:

    • Q: Are self-closing tags valid in HTML5?
    • AngularJS - Custom directives with self-closing tags capture tag siblings.
    • AngularJS - Self-closing directives not always rendering.
    0 讨论(0)
  • 南旧
    2020-12-06 05:17

    I've run into the same problem recently and managed to fix it by not using self-closing tags. Try <add-player></add-player> instead of the self-closing version.

    I don't know why self-closing tags don't work with dashes in the directive's tag name. Did a quick research back in the day and didn't find anything on the HTML/XHTML side. Perhaps a bug/limitation in Angular?

    0 讨论(0)
 看不清?
提交回复
热议问题