无法读取角度数据表中未定义的属性"aDataSort" [英] Cannot read property 'aDataSort' of undefined in angular datatables

问题描述

我正在尝试在我的项目中实现angular-datatables，但它返回"TypeError:无法读取未定义的属性'aDataSort'

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

我正在使用

Angular js版本1.4.9.

Angular js version 1.4.9.

jQuery版本2.1.1

Jquery version 2.1.1

DataTable版本1.10.10

DataTable version 1.10.10

推荐站点

角度数据表

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

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

预先感谢

推荐答案

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

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:

<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()...

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

Here is a demo. You can reproduce the error by removing the ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

这篇关于无法读取角度数据表中未定义的属性"aDataSort"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！