Ich arbeite an einer App, die Datei-Uploads haben wird. Ich möchte eine wiederverwendbare Datei-Upload-Komponente erstellen, die auf allen Seiten enthalten sein kann, die Datei-Upload-Funktionen benötigen. Ich dachte ursprünglich, dass ich einfach ein JSP-Tag verwenden könnte. Wir haben jedoch kürzlich AngularJS entdeckt und möchten es nun in der gesamten App verwenden. Daher möchte ich eine Direktive erstellen, die es mir erlaubt, einfach ein <myApp-upload> -Tag in meine Upload-Funktionalität zu stecken.
Ich habe zuerst meine Upload-Funktionalität auf eine eigene HTML-Seite gestellt, um sicherzustellen, dass AngularJS gut mit dem Plupload-Plugin funktioniert. Ich habe so etwas zusammengestellt:
%Vor%Die myApp.js sieht so aus:
%Vor% Wenn ich Dateien hineinziehe, sehe ich, dass die Dateinamen erscheinen und die Ausgabe von {{uploader.files}} sich von [] zu den Dateien im uploader-Objekt ändert. Also, jetzt möchte ich es in eine Direktive verwandeln. Ich nehme den gesamten Inhalt des Body-Tags und speichere ihn in einer Datei namens upload.html. Ich habe dann myApp.js hinzugefügt:
Dann habe ich eine HTML-Datei wie folgt:
%Vor% Wenn ich diese HTML-Seite lade, bringt das <myApp-upload> -Tag die upload.html-Datei mit. Es führt jedoch keine Datenbindung durch. Unten sehe ich {{uploader.files}} anstelle von [] , das ich anfangs sah, als es seine eigene Seite war.
Ich bin sehr neu in AngularJS, also bin ich mir sicher, dass ich gerade etwas vermisse oder etwas falsch mache. Wie bekomme ich diese Anweisung?
Ich habe mein Problem herausgefunden. Ich habe alle Javascript und CSS auf meiner Template-HTML-Seite eingefügt. Ich habe versucht, es in die Haupt-HTML-Datei zu verschieben, und dann hat es funktioniert. Mit anderen Worten, ich bewegte mich
%Vor%von der Datei upload.html in die Datei main, index.html.
Das JavaScript war im Sterben, als es darum ging, einige Plupload-Sachen in das Skript zu schreiben, hatte noch keine Chance, eingeschlossen zu werden.
Wir haben gerade eine Winkeldirektive für plUpload erstellt. Überprüfen Sie hier.