What is a root element in Angular?

Question

I have written a directive like this:

app.directive('headersort', function () {
    return {
        restrict: 'E',
        scope: {
            sortBy: '=',
            title: '='
        },
        template: '<th>{{ title }}</th>',
        replace: true,
        link: function (scope, element, attributes) { 
            scope.sortBy = attributes.sortBy;
            scope.title = attributes.title;

        }
    };
});

And I use it like this:

<headersort sortBy="Name" title="Product">

What I want is that <headersort sortBy="Name" title="Product"> is replaced with <th>Product</th>. But I get an error saying:

Template must have exactly one root element. was: <th>{{ title }}</th>

But I do have one root element, right? My root element is <th>, so why is angular throwing this error? What are the conditions/definition of a root element?

Answer 1

Take a look at this issue.

Try changing your directive from restrict: 'E' to restrict: 'A' and change your HTML to <th headersort sortBy="Name" title="Product"></th>