Javascript 角元素中的根元素是什么？

我已经写了这样的指令：

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;

        }
    };
});

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

app.directive（'headersort'，function（）{
返回{
限制：'E'，
范围：{
排序：'='，
标题：'='
},
模板：“{{title}}”，
替换：正确，
链接：函数（范围、元素、属性）{
scope.sortBy=attributes.sortBy；
scope.title=attributes.title；
}
};
});

我是这样用的：

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;

        }
    };
});

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

我想要的是将

替换为

产品

。但我得到一个错误，说：

模板必须只有一个根元素。was:{{title}}

---

但我有一个根元素，对吗？我的根元素是

，那么为什么要抛出这个错误呢？根元素的条件/定义是什么？

我认为它是关于

表
元素的。您在什么地方定义了它吗？
看看这个问题

尝试将指令从
restrict:'E'
更改为
restrict:'A'
，并将HTML更改为
谢谢。与这些问题的联系确实是我的问题。我现在将它作为一个属性来解决，而不是作为一个表头来解决。另外，链接函数中的所有代码都不是必需的，这就是为什么您有范围声明的原因。