DataTables and AngularJS.md

Now I've just spent 2 days using DataTables in my AngularJS project.

For me, the important part of the DataTables / AngularJS integration is being able to do it "the angular way". Which means, that the $scope has all the data, but just the data, and the presentation lies in the templates that create the DOM.

To give an idea, here is what the final result looks like: So in each table cell, there are all kinds of markup. For now, lets pretend it is a <ul> with <li>s containing links just for the sake of argument.

Because I'm using the

dataTable.fnClearTable();
dataTable.fnAddData($data);

approach, the $data javascript variable needs to hold the markup. It is not in the DOM.

(There seems to be a problem with markdown rendering of multi-line code in this forum - see the exact same source rendered more clearly in this github gist)

And hence, I'm forced to use my legacy, pre-AngularJS templating library, unless I want to do the even older:

var linksMarkup = "<ul>";
links.forEach(function (link) {
    linksMarkup += "<li><a href='" + link.href + "'>" + link.name + "</a>";
});
linksMarkup += "</ul>";

But this is not AngularJS. What I'm really looking for is being able to use AngularJS templates, and do:

<td>
    <ul>
        <li ng-repeat="link in links">
            <a href="{{link.href}}">{{link.name}}</a>
    </ul>
</td>
<td>
    bla bla bla
</td>

Using the AngularJS built-in and my own directives, services, scope functions, etc. Also allowing me to do <input ng-model="myVar"> that has a two-way binding with $scope.myVar - inside the table.

Yes, that gets created in the DOM.

I don't know what is the best interface between AngularJS and DataTables, but as long as I have to put all the table contents in a javascript variable, there is no chance I can do it "the angular way" and use AngularJS properly.

Sure I can get by with this for now. But for me, this is the crucial point: I want the to be able to use AngularJS inside the contents of the table too. Otherwise I'll have a non-AngularJS island inside of AngularJS and that won't work for me in the long run. It prevents me from using AngularJS everywhere.

So I hope there will be some way for me to do this. @allan, if it is helpful for you, I could create a simple jsbin or plunkr demonstrating what I'm talking about.