AngularJS does not pass data to JQuery DataTable

Question

I am using datatables from datatables.net and am running into some issues with the AngularJS ng-repeat and values being populated into the table. I have added a button that will pass a value into the table and this works great. However, when I try to add sorting and scroll bar to the table it stops working. I'm not sure what I'm doing wrong here.

html

<div ng-controller="TodoCtrl" id="TodoCtrl">
 <table id="example" cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered table-condensed">
 <thead>
 <tr>
 <th>Bus Id</th>
 <th>X Cords</th>
 <th>Y Cords</th>
 <th>Event Type</th>
 <th>Time Stamp</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="todo in todos"><td>{{todo.busId}}</td><td>{{todo.xCord}}</td><td>{{todo.yCord}}</td><td>{{todo.eventType}}</td><td>{{todo.timeStamp}}</td></tr>
 </tbody>
 </table>
 <form class="form-horizontal">
 <input type="text" ng-model="vbusId" ng-model-instant>
 <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
 </div>

jscript

function TodoCtrl($scope) { 
 $scope.todos = [];
 $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
 $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
 }
}

table script

$(document).ready(function() {
 $('#example').dataTable( {
 "sScrollY": "200px",
 "bPaginate": false
 } );
} );

If I comment out the table script the dynamic table works and gets populated with the passed data. If i uncomment the table code the table shows up with the sorting and scroll bar but it will not accept the values. Can someone tell what I am missing?

Thanks a bunch!

• Got The Fever Media: Maybe coz dataTable is firing too early. I assume $scope.todos requests a server to get a list of tasks. Wait for the scope to be filled up before launching dataTable. Using docs.angularjs.org/api/ng/service/$q would help

Answer 1

You need to ensure that the datatables is being called AFTER angular has digested the page. Something like this:

function TodoCtrl($scope, $timeout) { 
 $scope.todos = [];
 $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
 $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
 }
 $timeout(function(){
 $('#example').dataTable( {
 "sScrollY": "200px",
 "bPaginate": false
 } );
 }, 0, false);
}

However, flat mixing of angular and jquery in this way is a terrible idea. You really should be writting an angular directive to wrap the jquery plugin, or just not use jQuery at all.

• Trevor: Thank you for your response. You are right and after a lot of additional research and reading I have gone away from the approach I was originally taking. After some digging I found jquery and angular aren't the best to use together. So I ended up doing what you have suggested.