AngularJS jQuery datatables指令-在一个视图中包含多个数据表

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的更强大和惯用的语言，在Angular参考中有相当不错的文档。 但是第一种选择将使您步履蹒跚（尽管在同一参考页上实际上有一个示例，尽管他们指出这不是最佳实践）