Skip to content

Why you should always write valid HTML components?

Jump to bottom Edit New page
Davy Engone edited this page Sep 15, 2015 · 4 revisions

While working on a client project, we ran into a weird issue. Let's put together a simple scenario.

Take the code below:

<body ng-app="philos">
	<philos-brand/>  
	<philos-menu/>
</body>

We have two simple directives. The directives are defined below:

angular.module('philos', [])

.directive('philosMenu', function(){
	return {
		restrict: 'E',
		template: 'Philos Menu'
	};
})
.directive('philosBrand', function(){
	return {
		restrict: 'E',
		template: 'Philos Brand'
	};
})

The result would definitely look something like this:

Philos Brand Philos Menu

Unfortunately, the result rather look like this:

Philos Brand

What happened? Why the menu doesn't show?

The simplest answer is this element () isn't a valid HTML5 tag

Add a custom footer
Add a custom sidebar
Clone this wiki locally