An odd thing happened this weekend when I was tinkering with some code while pointedly ignoring my daughter and parenting responsibilities generally.

The Task

Put in a new directive to implement a reusable panel to display error information. Not ground breaking stuff by any means. The html is simple enough

<div class="row alert alert-warning alert-dismissible" role="alert" ng-show="display">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> {{display}}
</div>

Very bootstrappy as usual. Reference the directive on the view thus

<error-display display="vm.Error" />

Happy days – a lovely reusable error panel.

The Problem

Sadly it isn’t to be. The previously functional page becomes entirely blank after the directive.

Unhelpfully there is no errors in the console and viewing the HTML source does nothing for us since it is a single page application.

The Solution

The problem is the use of self closing tags when referencing the directive. Referencing the directive with an explicit closed tag resolves the issue. Example – use this markup

    <error-display display="vm.Error"></error-display>

And the page springs back to life

Relief all round. Fortunately I found the solution pretty quickly (though I still continued to ignore the daughter). It’s the sort of error that can wasted hours if it hits on a Friday afternoon when you are feeling generally depleted.

Actually the use of self closing tags isn’t that helpful in HTML5. I’ve got into the habit of using them but looking into it more deeply it’s actually a bad habit. They are valid but optional in HTML5 for void elements but invalid for non-void elements. Since they are either optional or invalid its best to avoid them and write out the tag – particularly as it causes obscure issues like this.

Useful Links

http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5
Good discussion of Stack Overflow about HTML5 and self closing tags.

https://docs.angularjs.org/guide/directive
The official documentation for AngularJS directives if more information is required.