javascript - What is a root element in Angular? -

i have written directive 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 use this:

<headersort sortby="name" title="product"> 

what want <headersort sortby="name" title="product"> replaced <th>product</th>. error saying:

template must have 1 root element. was: <th>{{ title }}</th>

but have 1 root element, right? root element <th>, why angular throwing error? conditions/definition of root element?

take @ this issue.

try changing directive restrict: 'e' restrict: 'a' , change html <th headersort sortby="name" title="product"></th>