Two ways of closing the tag for a custom directive, one works, the other does not

[bguiz]

Overview:

I have a directive named navTabs

When I put the directive into a template like this:

<nav-tabs />

The navTabs directive gets rendered, but the rest of the template does not. It appears as if the rest of the page has "dispappeared". Console log statements and Batarang both confirm that the controller for the template has executed and the models to be rendered are indeed present.

However, using this form:

<nav-tabs></nav-tabs>

... to put the directive into a template the rest of the template behaves as expected.

Note further that when placed at the top of the template, this problem occurs. When placed at the bottom of the template, however, it does not matter which form is used.

Motivation for or Use Case:

In HTML, it is legal to close a tag in both ways:

• <tag />, as well as
• <tag></tag>

When defining a custom directive with restrict: "E", I expect the angular template engine to be able to handle both forms for my directive as well.

Angular Version(s): 1.2.6

Browsers and Operating System: Occurs on both Chrome 32.0.1700.102 and Firefox 27.0, on both Ubuntu 13.10 and Windows 7. Doesn't appear to be a browser/ platform related issue.

Reproduce the error: See above in overview

Related issues: None that I am aware of. Related S/O question asked my yours truly

Suggest a Fix: No plans to work on it at the moment, just wanted to document it.

Severity: Low - the fix is extremely easy, however it can be very frustrating figuring it out for the first time. Hence raising this issue, so that others will find out quicker when Googling for it.

[caitp]

It's not possible to invent new void tags in HTML5, sorry :( You might be able to do this with XHTML, I'm not entirely sure about that. But I think you're out of luck here.

[bguiz]

@caitp In that case, I'd think the fix should involve logging an error when this happens, instead of failing silently.Angular should be able to detect when a void tag is used for a directive, during the parse phase for the templates.

[caitp]

@bguiz Angular has no idea that you're closing a tag like that. It's not possible for us to warn you. It's a bit unfortunate, but I don't think it's the end of the world, and who knows, maybe the next iteration of HTML will make this easier.

[caitp]

A member of the XMLWG has just confirmed my suspicion that you should be safe using XHTML, so you could give that a try.