Ich versuche gerade, eine AngularJS-App zu erstellen, in der ich ein jQuery-UI-Akkordeon-Steuerelement verwende.
Das Problem ist, dass das jQuery UI-Akkordeon initiiert wird bevor mein AngularJS-Dienst das Laden von Daten vom Server beendet hat. Mit anderen Worten: Das Akkordeon hat keine Daten, wenn es initiiert wird und zeigt daher nicht an, wenn die Daten von AngularJS aufgefüllt sind.
Die Ansicht sieht folgendermaßen aus:
%Vor%Mein AngularJS-Controller sieht so aus:
%Vor%Und meine AngularJS-Dienste sehen so aus:
%Vor%Gibt es eine Möglichkeit, dem Akkordeon zu sagen, dass es warten soll, bis die Daten vom Dienst zurückgegeben werden? : -)
Vielen Dank im Voraus!
Aktualisieren
Ich habe versucht, die Methoden zu verketten und etwas Logging hinzugefügt und es scheint, dass das Akkordeon tatsächlich initiiert wird, nachdem der JSON vom Dienst zurückgegeben wurde.
%Vor%Allerdings wird das Akkordeon nicht angezeigt :-( Das erste Akkordeon-Div sieht im generierten DOM gut aus:
%Vor%Aber der Rest des Markups (der mit eckigen Daten verbunden ist) wird nicht initiiert.
Vollständiges Markup:
%Vor%LÖSUNG
Endlich habe ich einen Weg gefunden! Ich bin mir nicht ganz sicher, ob es so schön ist und ob es die Angular-Art ist, Dinge zu tun (ich denke, das ist es nicht).
Eine Anweisung mit dem folgenden Code erstellt:
%Vor%Im Grunde, wenn das DOM fertig ist und wenn sich das Kategorien-Array ändert (was es tut, wenn die Daten geladen wurden), initiiere ich das jQuery UI Akkordeon.
Vielen Dank, @Sgoldy, dass Sie mich hier in die richtige Richtung weisen!
Ja, du brauchst ein directive und du kannst mit diesem mehr eckigen Weg umgehen!
In HTML definieren Sie die Anweisung
Gebe promise von deinem service zurück und übergebe den promise an die Direktive.
Im Controller
%Vor% Die ui-accordion -Direktive sieht wie
Wenn Ihr Serviceaufruf then erfolgreich ist, erstellen Sie Ihr Akkordeon. Hier können Sie Ihr eigenes accordion-template like
Vorlage bindet sich an Ihre Modelldaten myData . Ich verwende ng-repeat innerhalb der Vorlage, um accordion-header und accordion-body HTML zu erstellen.
In der Methode generateAccordion verwende ich $timeout , um sicherzustellen, dass ng-repeat wirklich fertig ist, da $timeout am Ende des aktuellen Digest-Zyklus ausgeführt wird.
Überprüfen Sie die Demo
Meine bewährte Methode besteht darin, Ihre asynchronen Dienste vor der Initialisierung des Controllers aufzulösen.
Wie Sie in dem Dokument sehen können, Ссылка . $ routeProvider
resolve - {Object. =} - Eine optionale Map von Abhängigkeiten, die in den Controller injiziert werden sollen. Wenn einer von Diese Abhängigkeiten sind Versprechen, auf die der Router alle warten wird aufgelöst werden oder eine, die vor dem Controller abgelehnt wird instanziiert. Wenn alle Versprechen erfolgreich gelöst sind, Werte der aufgelösten Versprechen werden injiziert und $ routeChangeSuccess Ereignis wird ausgelöst. Wenn eines der Versprechen abgelehnt wird, wird das Das $ routeChangeError-Ereignis wird ausgelöst.
Ihr Controller und Ihre View werden nicht einmal gestartet, bevor Ihr Service aufgelöst oder abgelehnt wird.
Es gibt ein gutes Video-Tutorial dazu, Ссылка
In Ihrem Fall können Sie Routen wie die folgenden konfigurieren
%Vor%Dann mit Ihrem Controller
%Vor%Ich habe auch eine ähnliche Frage gefunden und antworte hier
>Tags und Links javascript angularjs jquery jquery-ui