は、角度のDataTableに未定義のプロパティ「aDataSort」を読み取ることができません

Question

私は私のプロジェクトで角度-のDataTableを実装しようとしていますが、それは「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

にあなたはページが読み込まdatatables指令にshowCase.dtOptionsとshowCase.dtColumnsを渡し、彼らしていますサービスコールが完了するまで宣言されません。この一つの回避策は、サービスコールの後にHTMLを構築するためにng-ifを使用することです：

<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