Ich habe jQuery Slider in meinem Projekt verwendet, in dem ich Bilder mit eckigen geladen habe. Meine aktuelle Ansicht sieht folgendermaßen aus:
%Vor%der Controller;
%Vor%Und der jQuery Slider Code (um es zu einem Slider zu machen. Ich benutze dieses Plugin Ссылка )
%Vor% Wenn ich diesen Code ausprobiere, werden alle Bilder aus der Datenbank geladen (debuggt über Firebug) aber der jQuery-Slider wendet die Animation oder den Gleiteffekt nicht darauf an
Und wenn ich die data-ng-repeat="image in gallery entfernen und einige statische Inhalte verwenden, d. H. Bilder, bekomme ich den Schiebereffekt zurück.
Was ist das Problem hier. Ich denke, Angular manipuliert etwas wie mein DOM. Deshalb bekomme ich dieses Problem, wenn ich setze, d. H. Einige Winkelattribute auf meinem Schieberegler verwenden.
Hinweis: Ich habe das gleiche Problem mit jQuery-News, also jQuery InnerFade plugin Ссылка
Hier ist, wie die innerFade verwendet wird;
und der Controller;
%Vor% Wie behebe ich diese Probleme?
Update 2:
Hier sind meine Routen;
Lösung # 1:
Temporär, (wie @Jason Goemaat beantwortet) funktioniert für mich. Also, hier ist was ich getan habe. Ich habe kein directive erstellt, aber direkt habe ich meinem Controller $timeout injiziert und dann folgendes gemacht:
Und es hat für beide funktioniert, d. h. für Slider und für InnerFade
Angular IS manipuliert Ihr dom, die ng-repeat-Direktive erstellt die Elemente, wenn es eine Liste gibt, von der aus gearbeitet werden kann. Aus diesem Grund müssen Sie .slides aufrufen, nachdem eckling die Elemente erstellt hat, da das Plugin das DOM selbst verändert.
Hier ist eine Anweisung, die Sie verwenden können, um $.slides für ein Element aufzurufen, das darauf basiert, wann ein Array die Länge & gt; 0. Es zeigt zusätzliche Attribute wie 'Start' an, um den Aufruf von Folien zu modifizieren. Hier prüft es ein Array in Ihrem $ scope namens 'images' und ruft $timeout() während der Link-Phase auf, um .slidesjs() aufzurufen, wenn eckig mit dem Erstellen des DOMs fertig ist. Ich wusste nicht, welches Plugin du benutzt hast, also habe ich ein slidesjs gefunden, das ähnlich aussah. "Hier ist ein Plünderer:
Zypern
Html:
%Vor%Richtlinie:
%Vor%Beachten Sie, dass es immer noch nur einmal aufgerufen werden kann. Wenn Ihre Bilderliste aktualisiert wird, funktioniert das nicht. Dazu könnten Sie den Inhalt in der Direktive erstellen ...
wird ausgelöst, bevor eckig den Inhalt auf die Seite geladen hat. Das jQuery-Slider-Skript sollte erst aktiviert werden, nachdem eckal den Inhalt geladen hat. Ein Teil des Problems besteht darin, dass angular keinen Rückruf für $digest bietet, so dass Sie nicht auf ein Ereignis warten müssen.
Der Inhalt wird geladen - & gt; Ereignisrückruf - & gt; UI bauen, während in jQuery und Standard-Javascript-Denken üblich ist, ist es nicht Teil der eckigen Mentalität. Zum Glück hat eckig eine wahnsinnig leistungsfähige Methode, um dieses Problem zu lösen.
Sie müssen das Skript jQuery slideshow in eine eckige Anweisung umwandeln. Dann wird es Teil des eckigen Prozessraums und wird als Teil des eckigen Digest-Zyklus instanziiert.
Etwas wie
%Vor%Viel Glück!
Happy Beispiel Zeit mit innerfade (Ich habe dies noch nicht getestet, wird so schnell wie möglich). Zuerst muss Ihre Anwendung ein eckiges Modul deklarieren, falls dies noch nicht geschehen ist. %Code%. Ссылка
(stellen Sie sicher, dass Ihr Controller ebenfalls angeschlossen ist!)
Jetzt können Sie eine Direktive für dieses Modul deklarieren. Was ist super cool.
%Vor% Die Funktionsweise ist ziemlich einfach. Die Funktion ng-app="myModule" überwacht den Teil des Bereichs, der Ihre Daten enthält. Wenn sich das ändert (einschließlich der Initialisierung), wird die Funktion $watch jQuery für innerfade mit der Anweisung ausgelöst. Wir übergeben auch "C" an das restricte-Argument, so dass diese benutzerdefinierte Direktive eine Nur-Klassen-Direktive sein wird (ich habe bemerkt, dass dir das anscheinend gefällt).
Jetzt müssen Sie nur die Daten an element in Ihrem Controller binden (binden Sie es so, wie Sie möchten, einschließlich Ajax), und es wird einfach funktionieren. Sie können sogar die Daten in $scope.innerData ändern und es wird mit vollem jQuery Ruhm aktualisiert.
Ein paar Gedanken
1) Meine Vermutung ist, dass mit Ihrer Haupt-App-Seite etwas nicht stimmt. Haben Sie jQuery nach angularjs? Ich nehme an, Sie verwenden die ng-repeat-Anweisung?
2) Ändern Sie $ in jQuery
3) Platzieren Sie document.ready Skript auf der Hauptseite ... und überlegen Sie auch, es durch
zu ersetzen %Vor%Ich bin sicher, dass ich debuggen kann, wenn Sie Code für die Hauptseite sowie die Ansicht zeigen können.