Директива dacatables Angularjs jewery - несколько типов данных в одном представлении

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

И вторая директива может иметь другой набор параметров.

2-й вариант гораздо более прочный и идиоматический для Углового, есть довольно хорошая документация в the Angular reference. Но первый вариант заставит вас идти в крайнем случае (на самом деле это пример на той же странице справки, хотя они указывают на то, что это не лучшая практика)