无法读取角度数据表中未定义的属性“aDataSort”

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

我试图在我的项目中实现angular-datatables，但它返回“TypeError：无法读取属性'aDataSort'的undefined

I am using

我在用

Angular js version 1.4.9.

Angular js版本1.4.9。

Jquery version 2.1.1

Jquery版本2.1.1

DataTable version 1.10.10

DataTable版本1.10.10

Refrence site

参考网站

angular-datatables

角数据表

My Html Code

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

Thanks in advance

提前致谢

1 个解决方案

#1

You are passing showCase.dtOptions and showCase.dtColumns to the datatables directives when the page loads, but they are not declared until after your service call is completed. One workaround for this would be to use ng-if to construct the html after the service call:

在页面加载时，您将showCase.dtOptions和showCase.dtColumns传递给datatables指令，但在服务调用完成之后才会声明它们。一个解决方法是使用ng-if在服务调用之后构造html：

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

Then in your controller, initialize the variable before calling the service, and updating it after the call is complete:

然后在您的控制器中，在调用服务之前初始化变量，并在调用完成后更新它：

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 the ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

这是一个演示。您可以通过删除ng-if来重现错误。 http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

#1

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