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中有相當不錯的文檔。但第一個選項會讓你陷入一片混亂（實際上它在同一參考頁面上有一個例子，儘管他們指出這不是最佳做法）