Question

我有以下指令可以正常工作。

@JsonSerialize(using=JsonDateSerializer.class)

我使用这个指令：

HTML：

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);
        }
    };
});

来自控制器的javascript例如：

<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>

但是当一个视图中有多个数据表时，问题就出现了。您不能多次设置$ 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 datatables指令 - 一个视图中的多个数据表

1 个答案: