Aktualisiert eine eckige Baumansichtsanweisung, wenn ein neues Objekt zur Sammlung hinzugefügt wird
Ich habe Ссылка eine Treeview-Direktive, um mein Startblock zu sein. Ich versuche zu aktualisieren, wenn ich Objekte zur Sammlung hinzufüge. Ich kann das Objekt aktualisieren und die neuen Objekte einfügen, aber die Treeview-Direktive wird nie aufgerufen, wenn das Element $scoped aktualisiert wird.
Letztendlich werden die Daten von einem Service kommen. Ich teste gerade mit gefälschten Daten.
Die ursprüngliche Sammlung sieht so aus
%Vor%Dies erzeugt eine Baumansicht mit Kontrollkästchen unter Verwendung der folgenden Direktive und HTML
%Vor%Und dann die html
%Vor%Wenn ein Kontrollkästchen angeklickt wird, wird die neue Sammlung mit lodashjs
zu der vorhandenen hinzugefügtng-click-Ereignis
%Vor%erstellt das neue Array und fügt es in das Child-Array
ein %Vor%Ich kann in der Ausgabe sehen, dass ich ein neues Objekt habe, aber ich kann die Baumansicht nicht aktualisieren. Ich habe innerhalb der Direktive versucht, ein $ compile (element) für das click -Ereignis in der Direktive hinzuzufügen, aber da das Array noch nicht aufgebaut ist, ändert sich nichts.
Muss ich eine $ watch zu dieser Direktive hinzufügen und wenn ja, wo oder gibt es eine andere Möglichkeit, kann ich die Direktive dazu bringen, die neue geschachtelte Sammlung erneut zu rendern und anzuzeigen?
Aktualisieren
Basieren Sie auf einigen der Rückmeldungen und Fragen hier ist ein wenig mehr Details rund um die Frage. Das Problem, das ich sehe, ist nicht in der Direktive, soweit das Verschieben von Daten um das Problem herum ist. Ich kann die Baumansicht nicht mehr rendern, wenn ein Array zum existierenden Modell hinzugefügt wurde.
Der folgende Link ist ein funktionierender Plünderer , der das Projekt so zeigt, wie es derzeit funktioniert.
Wenn ich Chrome-Dev-Tools starte, kann ich sehen, dass das Modell aktualisiert wird, nachdem ein Kontrollkästchen ausgewählt wurde
Während das Objekt aktualisiert wird, wird die Direktive nie aktualisiert, um das neue Array anzuzeigen, das dem Objekt hinzugefügt wurde. Dies ist der Teil, den ich brauche, um zu verstehen.
Danke im Voraus
2 Antworten
Sie übergeben die Funktion an die inneren Anweisungen (was die beste Vorgehensweise ist), aber Sie haben Zugriff auf scope.filter . Nicht doSomethingFunction . Dieser ist undefined dort.
filter="doSomething(object, isSelected)"
= & gt;
filter="filter(object, isSelected)"
Weiter:
Sie können auf $$ Variablen in angularJS niemals zugreifen, da sie privat sind. Vielleicht solltest du einen aus deiner DB machen ..., aber die $$hashkey scheint eine einfache Lösung zu sein.
checked -Attribut könnte einen Fehler verursachen, weil ngModel in Ihrer Baumrichtlinientextvorlage nicht vorhanden ist. (setzen Sie vorher mindestens ? )
Ein Kontrollkästchen kann nicht als $$ Hash-Code dienen.
Ng-change und ng-click werden immer gleichzeitig aufgerufen, verwenden Sie die einfachste.
AKTUALISIEREN
Sie haben das gleiche treeController in Ihrer tree -Direktive und in Ihrer index.html -Ansicht.
Dies bewirkt, dass die Ansicht nicht aktualisiert wird!
Ich habe den in Ihrer Anweisung gelöscht, sonst haben Sie einen Controller für jedes Kind.
Sie haben die gute console.log-Nachricht in Ihrem Controller gesehen, aber sie war in einem Controller für EINE Anweisung.
Sie haben nicht auf den Controller von index.html zugegriffen.
Dann habe ich die filter function Kommunikation zwischen childs korrigiert:
Sie haben vergessen, die Filterfunktion mitzuteilen, wenn Sie neue tree s hinzufügen:
element.append('<tree src="b" filter="filter({ object: object, isSelected: isSelected })"></tree>');
Außerdem benötigen Sie in Ihrer Vorlage für die Eltern-Direktive auch den Hash, um Parameter an die Funktion zu senden:
filter="filter({ object: object, isSelected: isSelected })"
Ich habe Ihren Plunker HIER bearbeitet, ohne den Code mit den obigen Kommentaren zu ändern.
(Ich bin mir nicht sicher, was du schreibst, ist nicht das, was du willst und weil du es nicht kommentiert hast, ändere ich es lieber nicht, also befolgst du immer noch deinen Code)
Aber die Ansicht wird jetzt aktualisiert!
Ich denke ein wenig debuggen mit was du willst und die obigen Kommentare sollten reichen.
BEARBEITEN 2
Sie haben vergessen, ein Objekt mit der Eigenschaft chrilden zurückzugeben. Sie haben ein Array zurückgegeben, das das Problem verursacht hat.
Hier ist ein funktionierender PLUNKER .
Probieren Sie $ scope. $ apply () nach dem Hinzufügen von
Tags und Links javascript angularjs angularjs-directive