AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

Question

I'm trying to implement custom sortBy directive in order to make columns in html table sortable.

HTML:

<thead>    <tr>     <sort-by-directive       ng-repeat="header in headers"       onsort="onSort"       sortdir="filterCriteria.sortDir"       sortedby="filterCriteria.sortedBy"       sortvalue="{{ header.value }}">{{ header.title }}     </sort-by-directive>   </tr> </thead> 

JS:

angular.module('mainApp.directives').directive('sortByDirective', function () {          return {             templateUrl: 'SortHeaderTemplate',             restrict: 'E',             transclude: true,             replace: true,             scope: {                 sortdir: '=',                 sortedby: '=',                 sortvalue: '@',                 onsort: '='             },             link: function (scope, element, attrs) {                 scope.sort = function () {                     if (scope.sortedby == scope.sortvalue)                         scope.sortdir = scope.sortdir == 'asc' ? 'desc' : 'asc';                     else {                         scope.sortedby = scope.sortvalue;                         scope.sortdir = 'asc';                     }                     scope.onsort(scope.sortedby, scope.sortdir);                 }             }         };     }); 

Directive Template:

<script id="SortHeaderTemplate" type="text/ng-template"> <th ng-click="sort(sortvalue)">   <span ng-transclude=""></span>   <span ng-show="sortedby == sortvalue">     <i ng-class="{true: 'sorting_asc', false: 'sorting_desc'}[sortdir == 'asc']"></i>   </span>   <span ng-show="sortedby != sortvalue">     <i ng-class="{true: 'sorting', false: 'sorting'}[sortdir == 'asc']"></i>   </span> </th> </script> 

So when I use th as root tag of directive template I retrieve an error:

Error: [$compile:tplrt] Template for directive 'sortByDirective' must have exactly one root element. SortHeaderTemplate 

but when I change th to a or span tags everything works fine.

What am I doing wrong?

Answer 1

I've encountered oddities like that with directive and table elements. See this issue for example. Try wrapping your template with div tag or use replace:false.