không thể đọc thuộc tính 'aDataSort' không xác định trong datatables góc

Question

Tôi cố gắng để thực hiện góc-datatables trong dự án của tôi, nhưng nó sẽ trả về "Lỗi Loại: Không thể đọc thuộc 'aDataSort' không xác định

Tôi đang sử dụng

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

trang web refrence

angular-datatables

My Html Mã

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

góc js điều khiển Mã của tôi

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

Cảm ơn trước

Answer 1

Bạn đang đi qua showCase.dtOptions và showCase.dtColumns đến datatables chỉ thị khi tải trang, nhưng họ không được khai báo cho đến khi cuộc gọi dịch vụ của bạn hoàn tất. Một cách giải quyết cho việc này sẽ được sử dụng ng-if để xây dựng html sau khi cuộc gọi dịch vụ:

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

Sau đó, trong điều khiển của bạn, khởi tạo các biến trước khi gọi dịch vụ, và cập nhật nó sau khi cuộc gọi hoàn tất:

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

Đây là bản trình diễn. Bạn có thể tạo lại lỗi bằng cách xóa ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview