2016-03-14 6 views
7

Ich versuche Winkel-Datentabellen in meinem Projekt zu implementieren, aber es gibt „Typeerror lesen: Kann nicht lesen Eigenschaft‚aDataSort‘undefinierterKann nicht Eigentum ‚aDataSort‘ undefinierter in Winkeltables

Ich bin mit

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

refrence Website

angular-datatables

Mein HTML-Code

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

Mein Angular js Code-Controller

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

Vielen Dank im Voraus

+0

Sie können '$ resource's nicht als Basis für dataTables verwenden - wenn Sie' fromSource() 'verwenden, müssen Sie eine JSON-Datei (oder etwas, das ein einfaches JSON-Array von Objekten liefert) als Ziel verwenden $ resource "können Sie es einem Array von einfachen Objekten zuordnen und es als' withOption ('data', value) 'verwenden, vielleicht entlang' withDataProp() '... – davidkonrad

Antwort

2

Sie passieren showCase.dtOptions und showCase.dtColumns die datatables Richtlinien, wenn die Seite geladen wird, aber sie werden erst deklariert, nachdem Ihr Serviceanruf abgeschlossen ist. Eine Abhilfe hierfür wäre ng-if zu verwenden, um die html nach dem Service-Aufruf zu konstruieren:

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

Dann in Ihrem Controller, initialisieren Sie die Variable, bevor Sie den Kundendienst anrufen, und es nach dem Aufruf der Aktualisierung abgeschlossen ist:

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

Hier ist eine Demo. Sie können den Fehler reproduzieren, indem Sie die ng-if entfernen. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

+0

Danke! Für mich geht das – Xander