Impossibile leggere proprietà 'aDataSort' di indefinito in DataTable angolari

Question

Sto cercando di implementare angolari-DataTable nel mio progetto ma restituisce "TypeError: Impossibile leggere la proprietà 'aDataSort' di indefinito

Sto usando

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

sito refrence

angular-datatables

Il mio Html codice

<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> 

Il mio codice angolare js controller

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); 
     }); 
    } 

Grazie in anticipo

Answer 1

si passa showCase.dtOptions e showCase.dtColumns alle datatables direttive quando la pagina viene caricata, ma non vengono dichiarati fino a quando la chiamata di servizio non è stata completata. Una soluzione per questo sarebbe quella di utilizzare ng-if per costruire il codice html dopo la chiamata di servizio:

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

Poi nel controller, inizializzare la variabile prima di chiamare il servizio, e l'aggiornamento dopo la chiamata è completa:

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

Ecco una demo. È possibile riprodurre l'errore rimuovendo lo ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview