如何使用数据表创建基本的 angularjs 指令答案

【问题标题】：How to create basic angularjs directive with datatables如何使用数据表创建基本的 angularjs 指令
【发布时间】：2014-03-10 16:00:42
【问题描述】：

我的html：

<table data-table ng-show="bookings">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>ID number</th>
            <th>Email</th>
            <th>Cellphone</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in bookings | orderBy:['student.firstname', 'student.surname']">
            <td>{{ booking.student.firstname }}</td>
            <td>{{ booking.student.surname }}</td>
            <td>{{ booking.student.id_number }}</td>
            <td>{{ booking.student.email }}</td>
            <td>{{ booking.student.cellphone }}</td>
        </tr>
    </tbody>
</table>

我的指令：

.directive('dataTable', function() {
        return {
            restrict: 'A',
            replace: false,
            transclude: true,
            link: function (scope, el, attrs) {
                console.info('dataTable', el);
                $(el).dataTable();
            }
        }
    })

我没有收到任何错误，但没有显示任何内容（我现在不知道el 是什么）。我希望在信息被嵌入的地方使用它，然后使用 dataTable 的“零配置”。我认为这很简单，唉，指令:(

【问题讨论】：

顺便说一句，你检查过angular-table吗？
@Atropo 谢谢你，虽然我必须有过滤框和分页

标签： javascript angularjs jquery-datatables

【解决方案1】：

你看过ng-grid吗？这是一个提供分页/排序等的本机实现。

但是如果你必须使用 DataTables，看看这个答案，我最近使用了这里的解决方案，效果很好：https://stackoverflow.com/a/16096071/2383201

【讨论】：

我看过那个例子。这不是我真正希望做的。它有太多的配置可以通过嵌入来完成

【解决方案2】：

您不能使用data 作为属性的前缀。将其更改为其他任何内容，例如myTable（用法：my-table）会让指令接收它。

但是，它现在似乎无法解析列，这意味着唯一的解决方案是@Skinty 给出的the link

【讨论】：

【解决方案3】：

您也可以查看angular-datatables - Datables using angular directives 项目。它有很多关于如何将角度指令与数据表一起使用的示例。

我知道这个问题现在有点老了，但我认为它可能会帮助那些最终在这里搜索相同问题的人。

【讨论】：