使用 angularjs 指令上的模板创建具有 rowspan 的 table

Question

我创建了一个自定义指令来输出相当简单的表格数据。这是我当前的代码：

app.directive('searchResult', function () {
    return {
        restrict: 'E',
        scope: { content: '=' },
        link: function (scope, element, attrs) {
            var html = '<table class="table table-bordered">';
            angular.forEach(scope.rows, function (row, index) {
            if (row.names.length > 1) { 
               var names = row.names;
                html += '<tr>';
                html += '<td rowspan='+row.names.length+'>'+row.num +'</td>';
                html += '<td>'+names[0] + '</td>';
                html += '</tr>'

                for (var i = 1; i < names.length; i++) {
                   html += '<tr>';
                   html += '<td>'+names[i] +'</td>';
                   html += '</tr>';
                }
           } else {
                html += '<tr>';
                html += '<td>'+row.num +'</td>';
                html += '<td>'+row.names[0] + '</td>';
                html += '</tr>';
        }
        })
        html += '</table>';
        element.replaceWith(html)
        }
    }
});

此代码的问题在于绑定。如果用户搜索新项目，该指令将在先前显示的结果上方创建一个新的 table，而不是替换旧结果。

我正在尝试使用 templateUrl 并拥有一个内部包含 {{content}} 且绑定有效的模板。旧的搜索结果被新的替换。

有没有办法在模板内执行此 table 代码创建？

Answer 1

完成 html 后使用 $compile 服务。

$compile

而不是：

element.replaceWith(html)

尝试：

html = $compile(html);

它应该保留所有 Angular.js 绑定。但是，这不是一个好的做法，因为您正在强制进行额外的范围刷新。

Answer 2

我使用此代码使用模板解决了我的案例：

<table class="table table-bordered">
    <tbody>            
        <tr ng-repeat-start='myEntry in content'>
            <td rowspan="{{myEntry.names.length}}">{{myEntry.num}}</td>
            <td>{{myEntry.names[0]}}</td>
        </tr>
        <tr ng-repeat-end ng-repeat='name in myEntry.names' ng-if="$index > 0">
            <td>{{name}}{{myEntry.names}}</td>
        </tr>
    </tbody>
</table>

一些代码基于 SO 中的链接：

Here's the link for creating tables with rowspan using ng-repeat
This link is for skipping first item

感谢 Michał Lach 指出了一种更优雅的方法。

使用 angularjs 指令上的模板创建具有 rowspan 的 table

Create a table with rowspan using a template on an angularjs directive

angularjs

templates

html-table

directive