dataTables jQuery plugin in Angular application when using $routeProvider

Question

Im wanna use dataTables jQuery plugin in my Angular application but is facing a problem with the Angular routing.

I initialize dataTables in $(document).ready and use Angular $routeProvider to navigate trough my views. When changing view and then back again to the table, dataTable is not running.

The table is populated with objects from multiple ng-repeat directives. The code for this is not included below because its a pretty massive table.

Which is the preferred way to initialize dataTables in an Angular application to get rid of the race condition, trough a directive, controller or in $(document).ready(function()) as I do now?

I tried this directive but never got it to work: http://jsfiddle.net/TNy3w/2/ Should I continue on this path?

dataTable init:

$(document).ready(function() {
oTable = $('#t').dataTable({
    "bSort": false,
    "bFilter": true,
    "bInfo": false,
    "sScrollY": "500px",
    "sScrollX": "10%",
    //"sScrollXInner" : "150%",
    "bScrollCollapse": true,
    "bPaginate": false,
});
new FixedColumns(oTable);
});

My table:

</table id="t">
<..... TABLE CODE .....>
</table>

Answer 1

I would recommend that you look at this plunked. I developed this code just recently. It is native angular and easy to understand. It is dynamic and it is a cool table.

http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

Personally, I think you are setting yourself up for issues with the combination of code you are using.. Is there a chance you would abandon the use of jQuery all together? When I first started using ng I mixed in a lot of jQuery and it was a lot of headache.

If you want to continue with jQuery....

My guess is that your angular app and jQuery are not talking.

A route provider loads a partial. In order to invoke a function from jQuery you must call it from withing the scope of your Angular controller, or you must apply changed made by jQuery to the scope.

If you are loadin a partial in the route provider then document ready event is not triggered. You could store your document ready code into a function and call it in the controller or from an angular function. Frankly, it is nightmarish combining them.

I built a project combining kineticjs, jQuery and angular and I had to call all my jQuery functions from within angular functions to make it all work.

So you need something along these lines..

This in your angular app..

$scope.angularFunction = function () {

    JQueryfunction();

}

This is not angular..

JQueryfubction () {

    // your jQuery function logic

}