What is the root element in Angular?

Question

I wrote 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 as follows:

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

I want <headersort sortBy="Name" title="Product"> be replaced with <th>Product</th> . But I get an error message:

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

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

Answer 1

Take a look at this issue.

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

Answer 2

I think he is talking about the table element. Have you identified it anywhere?