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

Posted 2023-02-22

【中文标题】Angularjs jquery datatables 指令 - 一个视图中的多个数据表

【英文标题】：Angularjs jquery datatables directive - multiple datatables in one view

【发布时间】：2017-02-06 05:16:15

【问题描述】：

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

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。 似乎这种方法在这种情况下效率不高。

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

谢谢。

【问题讨论】：

您可以将选项作为属性传递，而不是在范围内设置选项

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

是的，你是对的。首先我想使用属性方法，然后转到嵌套控制器方法，因为我需要在代码中设置一些东西