AngularJS element directives not displaying when using self-closing tags

Question

I have in my html file directives

and the directives are on the form

.directive(\'add\', [\'$w         


        

Answer 1

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 means . Therefore you are never closing the first element which prevents the others to work.

On Plunker you have:

   
   Self closing 
   Self closing 

which parses into

   
   Self closing 
      Self closing 
    
  

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

   
       back
   
   Self closing 
       back
   

What should I do then?

Use for all and it will work fine. Alternatively you could use element attributes:

.

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.