使用指令插入表头

Question

我正在尝试使用角度指令插入表头。但是，它不是进入所需的thead 内部，而是放置在table 元素之外。 这是代码笔：http://codepen.io/sachingoel0101/pen/yYvmGV

<table class="table table-bordered table-striped">
    <thead>
        <sortingheader/>
    </thead>
    <tbody>
    </tbody>
</table>

只会变成：

<tr>
    <th>Sushi Roll</th>
    <th>Fish type</th>
    <th>Taste Level</th>
</tr>
<table class="table table-bordered table-striped">
    <thead></thead>
    <tbody></tbody>
</table>

这是指令代码：

.directive('sortingheader', function() {
    return {
        replace: true,
        template: "<tr><th>Sushi Roll</th><th>Fish type</th><th>Taste Level</th></tr>"
    }
})

我做错了什么？

Answer 1

您需要将指令restrict 属性更改为：

restrict:'A'

在 HTML 中：

<tr sortingheader></tr>

Working solution