Expose method to rerender entire directive

[buob]

It seems that there are services exposed by factories to render the individual components of the directive, but none that seem to take the same approach as the watcher in the compile function of the directive. It also seems like there is not an easy way to get the buildOptions and other vars to pass into the factory.

I've seen some other libraries allowing you to pass in a control object to the directive and expose methods that way, any objections to me doing that?

[l-lin]

If you feel you can improve this module, by all means, I'll glady accept any proposition 😄

It seems your issue comes from the fact that you need to rerender your table.
In fact, it's best to use the DataTable's API if you need to do some operations in existing tables.
For instance, if you need to rerender:

$scope.$on('event:dataTableLoaded', function(loadedDT) {
    loadedDT.DataTable.draw(); // This will redraw your table
});

Not sure If I answer your question.

[buob]

Not exactly. What I could do with that is bind the loadedDT to the directive instance when that event is fired, and then later call

$scope.$on('someevent', function() {
    this.loadedDT.draw();
});

Or something of the sort. After trying that, however, it only seems to rerender part of the actual table (and that's after a significant timeout). There seems to be some disparity between the draw method and the approach used here: https://github.com/l-lin/angular-datatables/blob/master/dist/angular-datatables.js#L384. What would be ideal is an exposure of that approach of rerendering, does that seem incorrect?

[l-lin]

This feature will be available for the upcoming version (v0.4.0).
This new version will offer a way to fetch a DTIntance, an object that "represents" the directive and some APIs will be exposed, such as reloadData(), changeData(data) and rerender() instead of using watchers.
In this version, to rerender a table, the code will look like this:

<div ng-controller="MyCtrl as showCase">
    <button ng-click="showCase.dtInstance.rerender">Re-render</button>
    <table datatables dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns"></table>
</div>

angular.module('yourModule', ['datatables'])
.controller('MyCtrl', MyCtrl);

function MyCtrl(DTOptionsBuilder, DTColumnsBuilder, DTInstances) {
    var vm = this;
    vm.dtOptions = ...;
    vm.dtColumns = [...];

    DTInstances.getLast().then(function(dtInstance) {
        vm.dtInstance = dtInstance;
    });
}

[mfrancis107]

DTInstances.getLast()

Does not appear to be working. The promise is never resolved.

In the source it looks like the variable _lastDTInstance which is a promise is never resolved.

[l-lin]

Can you provide a plnkr or something alike that reproduces the issue?

I don't reproduce the error in my demo.

[mfrancis107]

I was trying to use the function ```DTOptionsBuilder.newOption().withFnServerData. I'm wanting to use this so I can pass additional data to the POST request. Is there another technique for doing that?

Here's a plnkr
http://plnkr.co/edit/iCHGfDtUTo9U118ZOD3q?p=preview

[l-lin]

You must have forgotten to save your changes on the plnkr.
If you need to provide additional data to your POST request, use the ajax attribute.

[mfrancis107]

Here's the plunk.

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

[l-lin]

Well, DTInstances.getLast() is working fine on your plnkr 😕