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:

Answer 1

I got this error when I used the template property of the directive definition when I should've been using templateUrl if that helps anyone.

Answer 2

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.

Answer 3

As stated by others: this is because your browser ignores the TH before it gets placed inside the table. My prefered way to fix this is to change the directive to an attribute directive and add it to a TH in the table.

Directive looks like this:

.directive('sortByDirective', function () {

    return {
        templateUrl: 'SortHeaderTemplate',
        restrict: 'A',
        transclude: true,
        replace: false,
        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);
            }
        }
    };
});

Setting it on your page looks like this:

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

Answer 4

Which version of angular are you using ?

There was a bug for something looking like your problem that was fixed in 1.2.13 1.3 Beta 1 commit link

https://github.com/angular/angular.js/issues/1459

Answer 5

I know it's very old answer and question but I encountered this error and fix it by put my comment inside a div tag.

before:

    <!--You commented code-->
      <div>

      </div>

after:

<div>
    <!--You commented code-->
</div>

Answer 6

I have encountered the issue couple of times and most of the times it could be that you are not wrapping your elements under one element like

<div>
  <div... </div>
</div>

But there was one occasion where you get this error when the template path is not correct. So please check if you are referring to the template correctly.