Angularjs jquery datatables directive - multiple datatables in one view

Question

I have the following directive which works fine.

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);
        }
    };
});

And I use this directive like this:

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

• And javascript from controller for example:

  $scope.dtOptions = {
      'processing': true,
      'serverSide': true,
      'pageLength': 25,
      'ajax': 'read_data_tables.php'
  };
  

But the problem comes when you have multiple data tables in one view. You cannot set multiple times $scope.dtOptions. Seems this approach is not quite efficient in this situation.

If someone has an idea how could this code be integrated to work with multiple data tables in one view it will be great.

Thanks.

Answer 1

As your directive is not working with an isolated scope it is essentially working in the controller's scope, which makes it impossible to control 2 directives on the same page (or at least, within the same controller scope).

The way I see it you have 2 main options:

• You can create a second controller to wrap your second directive (then that controller will have its own scope in which you can set your dtOptions)

• You can change your directive to work with an isolated scope and get parameters passed on the declaration, so your directive would look like

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

And the 2nd directive could have another set of parameters.

The 2nd option is by far more robust and idiomatic of Angular, there is pretty good documentation in the Angular reference. But the first option will get you going in a pinch (there is actually an example of it on the same reference page, although they point out that it is not a best practice)