Unable to read property "aDataSort" undefined in angular datatables

Question

I am trying to implement angular -datatables in my project, but it returns "TypeError: cannot read property" aDataSort "undefined

I use

Angular js version 1.4.9.

JQuery version 2.1.1

DataTable Version 1.10.10

Confirmation site

angular-datatables

My html code

<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div> 

My angular js controller code

 angular.module( 'admin.package', [ 'ui.router', 'ui.bootstrap', 'datatables', 'datatables.bootstrap', 'ngResource', 'plusOne' ]).controller('WithAjaxCtrl', WithAjaxCtrl); function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) { UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { if(results.status==200){ var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages) .withPaginationType('full_numbers'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('id'), DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'), DTColumnBuilder.newColumn('amount').withTitle('Amount'), DTColumnBuilder.newColumn('package_duration').withTitle('Amount'), DTColumnBuilder.newColumn('currency').withTitle('validity') ]; console.log(vm.dtColumns); console.log( vm.dtOptions); }else{ alert('You are not a authorized user'); } }, function(reason) { console.log(reason); }); } 

Thanks in advance

Answer 1

You pass showCase.dtOptions and showCase.dtColumns directives when the page loads, but they are not declared until your service call ends. One workaround for this would be to use ng-if to build html after calling the service:

 <table ng-if="showCase.authorized" datatable="" ... 

Then in your controller, initialize the variable before calling the service and update it after the call ends:

 app.controller('WithAjaxCtrl', function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, UserService) { var vm = this; vm.authorized = false; UserService.get()... 

Here is a demo. You can reproduce the error by removing ng-if . http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview