CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Martijn
Martijn

Reputation: 24819

What is a root element in Angular?

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?

Upvotes: 6

Views: 2687

Answers (2)

rtcherry
rtcherry

Reputation: 4880

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>

Upvotes: 5

vivek
vivek

Reputation: 2857

I think its saying about the table element. Did you define it somewhere?

Upvotes: 0

Related Questions