Angularjs jquery 数据表指令 - 一个视图中的多个数据表

Question

我有以下指令，效果很好。

angular.module('myApp').directive('jqdatatable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ngModelCtrl) {

            var options = {};
            if (scope.dtOptions) {
                options = scope.dtOptions;
            }
            console.log('applying data table');
            element.DataTable(options);
        }
    };
});

我这样使用这个指令：

HTML:

<table jqdatatable>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </tfoot>         
</table>

和来自控制器的 javascript 例如：

$scope.dtOptions = {
    'processing': true,
    'serverSide': true,
    'pageLength': 25,
    'ajax': 'read_data_tables.php'
};

但是当一个视图中有多个数据表时，问题就来了。您不能设置多次 $scope.dtOptions。似乎这种方法在这种情况下不是很有效。

如果有人知道如何集成此代码以在一个视图中处理多个数据表，那就太好了。

谢谢。

Answer 1

由于您的指令不在独立范围内工作，因此它实际上在控制器的范围内工作，这使得无法在同一页面上（或至少在同一控制器范围内）控制 2 个指令。

在我看来，您有两个主要选择：

您可以创建第二个控制器来包装您的第二个指令（然后该控制器将有自己的范围，您可以在其中设置您的 dtOptions）

您可以更改您的指令以使用隔离范围并获取在声明中传递的参数，因此您的指令看起来像

<table jqdatatable processing="true" 
       serverSide="true" pageLength="25" 
       ajax="read_data_tables.php">

第二条指令可以有另一组参数。

第二个选项比 Angular 更健壮和惯用，the Angular reference 中有很好的文档。但是第一个选项会让你陷入困境（实际上在同一个参考页面上有一个例子，尽管他们指出这不是最佳实践）

Angularjs jquery 数据表指令 - 一个视图中的多个数据表

Angularjs jquery datatables directive - multiple datatables in one view

javascript

jquery

datatables

angularjs

angular-directive