web-dev-qa-db-ja.com

angular datatablesで未定義のプロパティ 'aDataSort'を読み取ることができません

プロジェクトにangular-datatablesを実装しようとしていますが、「TypeError：Undefinedのプロパティ 'aDataSort'を読み取れません」が返されます

使用しています

Angularjsバージョン1.4.9。

Jqueryバージョン2.1.1

DataTableバージョン1.10.10

参照サイト

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>

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

前もって感謝します

jqueryangularjsdatatablesangular-datatables
10
Sharma Vikram

ページの読み込み時にshowCase.dtOptionsおよびshowCase.dtColumnsをdatatablesディレクティブに渡しますが、サービス呼び出しが完了するまで宣言されません。これに対する1つの回避策は、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

7
j.wittwer

<th>がテーブル構造の<thead>内にあることを確認してください。

例：

<thead>
   <tr>
     <th> name </th>
     <th> email </th>
   </tr>
</thead>
0
Faz