dt-instance directive not working for controllerAs

vm.dtInstance is not set after the table is rendered – all other vm.<whatever’> work

html

<div class="vers1 v1-booklets-booklets" ng-controller="BookletsBookletsListCtrl as vm">
    <table id="v1-booklets-booklets" datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" class="{{vm.dtClasses}}" dt-instance="vm.dtInstance"></table>
    <div class="hide-remove"><action-icon-set id="TAB-Booklets" class="dataTables_actionIcons" data-entity-id="41" data-entity-type="booklet" actions="refreshTable,newBooklet"/></div>
</div>

javascript

            vm.dtInstance.reloadData();

TypeError: Cannot read property ‘reloadData’ of undefined at booklets-booklets-list.js:94 at Scope.parent.$get.Scope.$emit (angular.js:14793) at angular-action-icons.js:117

I have to use the old method – and I get warned

angular.js:11699 “DTInstances.getLast()” and “DTInstances.getList()” are deprecated! Use the “dt-instance” to provide the datatables instance. See https://l-lin.github.com/angular-datatables/#/manipulatingDTInstances for more information.

[dashawk]

Try to use Fetching DataTable Instances.

You can implement it:

angular.module('myApp', []).controller('myController', [function () {
    vm.dtInstance = {};

    vm.dtOptions = ...;
    vm.dtColumns = ...;

    vm.dtIntanceCallback = function (instance) {
        vm.dtInstance = instance;
    }

    // You should be able to get the table instance
    console.log(vm.dtInstance);
}]);

And in your html…

<table
    datatable
    dt-options="vm.dtOptions"
    dt-columns="vm.dtColumns"
    dt-instance="vm.dtInstanceCallback"
    class="row-border hover">
</table>

Hope this helps…

[alessandroasq]

This is the solution:

js: vm.dtInstance = {};

vm.dtInstanceCallback = function(_dtInstance) { vm.dtInstance = _dtInstance; vm.dtInstance.reloadData(); //or something else… }

html: dt-instance=“vm.dtInstanceCallback”