AngularJS - Jquery datatable empty

Question

I'm trying to display a datatable using angular and jquery datatable but so far the datatable stays empty after applying the datatable function.

I've read that the best way is to use a directive but I can't get it working. This only I've manage to get it working is by applying a timeout with 100 ms (time out less than 100 didn't work)

What I'd like to do is to apply the datatable function after the DOM is rendered. I'm sure someone has managed to do that ;)

userController.js

myApp.controller('UserController', ['$scope', 'User',
    function ($scope, User) {

        User.query(function(data) {
            $scope.users = data;
        }, function(errorData) {
        });

    }]);

datatableSetup.js

myApp.directive('datatableSetup', ['$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs) {
                $timeout(function() {
                    elm.dataTable();
                }, 100);
            }
        }
    }]);

user.html

<table datatable-setup="" class="table table-bordered table-striped">
<thead>
<tr>
    <th>Username</th>
    <th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
    <td>{{user.username}}</td>
    <td>
        <ul>
            <li ng-repeat="role in user.roles">
                {{role}}
            </li>
        </ul>
    </td>
</tr>
</table>

Answer 1

When integrating the DataTables plugin with AngularJS and using the DOM as the data source you need to wait for the DOM to have finished rendering before calling 'dataTable()'.

If you are retrieving the data to be rendered asynchronously you need to wait for that data to be available as well.

My guess is that in this case the 100ms delay you are using is enough for both of these to have finished.

To run something after the DOM has rendered you can usually wrap the call in a $timeout without specifying a delay. This will put the call at the end of the execution queue and when it's run Angular should have finished the $digest loop and everything should have been rendered:

app.directive('datatableSetup', ['$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        $timeout(function () {
          element.dataTable();
        });
      }
    }
  }
]);

Now you need to make sure that that either:

1. The directive is not compiled until the data from the asynchronous call is available
2. The $timeout code in the directive's link is not run until the data from the asynchronous call is available

If you want to go the first route you can put a ng-if on the table element to delay the creation of the DOM portion (and the compilation of your directive) until the data is available. You can check that the users array contains data or simply set a variable to true when the data is finished loading:

<table ng-if="users.length" datatable-setup class="table table-bordered table-striped">

Demo: http://plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv?p=preview

For the second route there are multiple options. You can for example use a watcher inside the link function that you unregister when used, use $broadcast/$emit or even a service or some custom notification system.