Не удается прочитать свойство «aDataSort» неопределенных в угловых DataTables

Question

Я пытаюсь реализовать угловой DataTables в моем проекте, но она возвращает «TypeError: Не удается прочитать свойство„aDataSort“неопределенной

Я использую

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

Refrence сайт

angular-datatables

Моего HTML код

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

Моего Угловой JS код контроллер

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

Заранее спасибо

Answer 1

Вы проезжаете showCase.dtOptions и showCase.dtColumns к datatables директивам при загрузке страницы, но они не объявляются до завершения вашего служебного вызова. Один из способов для этого было бы использовать ng-if для построения HTML после вызова службы:

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

Затем в контроллере, инициализировать переменную перед вызовом службы, и обновлять его после вызова завершения:

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

Это демо-версия. Вы можете воспроизвести ошибку, удалив ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview