5

Ich möchte DataTables jQuery Plugin in meiner Angular-Anwendung verwenden, steht aber vor einem Problem mit dem Angular-Routing.

Ich initialisiere DataTables in $ (Dokument) .ready und benutze Angular $ routeProvider, um durch meine Ansichten zu navigieren. Wenn Sie die Ansicht ändern und dann wieder in die Tabelle zurückkehren, wird dataTable nicht ausgeführt.

Die Tabelle enthält Objekte aus mehreren ng-repeat-Anweisungen. Der Code dafür ist unten nicht enthalten, weil es ein ziemlich großer Tisch ist.

Welcher ist der bevorzugte Weg, um DataTables in einer Angular-Anwendung zu initialisieren, um die Race Condition loszuwerden, durch eine Direktive, Controller oder in $ (Dokument) .ready (function()) wie jetzt?

Ich habe diese Anweisung versucht, aber nie funktioniert: http://jsfiddle.net/TNy3w/2/ Sollte ich auf diesem Weg weitermachen?

Datatable init:

$(document).ready(function() { 
oTable = $('#t').dataTable({ 
    "bSort": false, 
    "bFilter": true, 
    "bInfo": false, 
    "sScrollY": "500px", 
    "sScrollX": "10%", 
    //"sScrollXInner" : "150%", 
    "bScrollCollapse": true, 
    "bPaginate": false, 
}); 
new FixedColumns(oTable); 
}); 

Meine Tabelle:

</table id="t"> 
<..... TABLE CODE .....> 
</table> 

Antwort

2

Ich würde empfehlen, dass man sich diese schmiss. Ich habe diesen Code erst kürzlich entwickelt. Es ist nativ eckig und leicht zu verstehen. Es ist dynamisch und es ist ein cooler Tisch.

http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

Ich persönlich denke, Sie selbst sich für Probleme mit der Kombination von Code setzen Sie verwenden .. Gibt es eine Chance, dass Sie die Verwendung von jQuery im Stich lassen würde alles zusammen? Als ich anfing, ng zu verwenden, mischte ich viel jQuery und es war eine Menge Kopfschmerzen.

Wenn Sie mit jQuery fortsetzen wollen ....

Meine Vermutung ist, dass Ihre Winkel App und jQuery sprechen hier nicht.

Ein Routenanbieter lädt einen Teil. Um eine Funktion von jQuery aufzurufen, müssen Sie den Bereich Ihres Angular-Controllers aufrufen oder Sie müssen die von jQuery vorgenommene Änderung auf den Bereich anwenden.

Wenn Sie einen Teil im Routenanbieter laden, wird das dokumentbereite Ereignis nicht ausgelöst. Sie könnten Ihren Dokument-Ready-Code in einer Funktion speichern und in der Steuerung oder von einer Winkelfunktion aufrufen. Ehrlich gesagt, es ist alptraumhaft, sie zu kombinieren.

Ich habe ein Projekt erstellt, das kineticjs, jQuery und eckig kombiniert, und ich musste alle meine jQuery-Funktionen innerhalb von eckigen Funktionen aufrufen, damit alles funktioniert.

Sie müssen also etwas in dieser Richtung ..

Diese in Ihrer Winkel App ..

$scope.angularFunction = function() { 

    JQueryfunction(); 

} 

Dies ist nicht eckig ..

JQueryfubction() { 

    // your jQuery function logic 

} 
+0

landete ich jQuery Datentabellen mit dem Entfernen von oben und schrieb mein eigenes "Plugging" mit den Funktionen der Datatables. Problem gelöst. Danke für deine Antwort! – rilar