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