Mit angular.copy in AngularJS kopieren

angular.copy ist eine AngularJS-API zum Kopieren eines Werts, meist eines Objekts oder Arrays. Änderungen an der Kopie wirken sich nicht über gemeinsam genutzte verschachtelte Objektreferenzen auf das Original aus. Dieser Leitfaden behandelt die beiden Aufrufformen und ein Muster für den Umgang mit Formularzustand. Er bezieht sich auf AngularJS; modernes Angular stellt diese AngularJS-API nicht bereit.

Das Verhalten von angular.copy beim tiefen Kopieren verstehen

Bei einer flachen Kopie wird ein neues äußeres Objekt erstellt, verschachtelte Objekte können jedoch gemeinsam genutzt bleiben. Eine tiefe Kopie kopiert verschachtelte Daten rekursiv. Daher ändert eine Änderung an einer verschachtelten Eigenschaft der Kopie diese Eigenschaft in der Quelle nicht. Entscheidend ist der unabhängige Objektzustand; eine tiefe Kopie garantiert keine bestimmte physische Speicheranordnung.

Ist beispielsweise source.profile ein Objekt, bleibt source.profile.name unverändert, wenn Sie nach copy = angular.copy(source) copy.profile.name ändern. Das ist nützlich, wenn ein Formular oder Editor eine Arbeitskopie der Daten benötigt und zugleich eine separate Ausgangsversion zum Zurücksetzen erhalten bleiben soll.

Ohne Ziel kopieren

Rufen Sie angular.copy(source) mit einem Argument auf, um eine neue Kopie zu erstellen und zurückzugeben. Speichern Sie den Rückgabewert, zum Beispiel mit var savedForm = angular.copy($scope.form);. Die Quelle bleibt erhalten; savedForm kann als Momentaufnahme für einen späteren Vergleich oder zum Zurücksetzen dienen.

Das folgende ausführbare JavaScript-Referenzbeispiel zeigt, warum verschachtelter Zustand unabhängig kopiert werden muss. Es verwendet die Sprachfunktion structuredClone, nicht AngularJS. Die Ausgabe veranschaulicht daher nur das Referenzverhalten und prüft nicht angular.copy.

Führen Sie dieses JavaScript-Referenzbeispiel aus. Die Bezeichnungen und Ausgaben im unveränderten Beispielcode bleiben auf Englisch:

const source = { profile: { name: "Mina" } };
const copy = structuredClone(source);
copy.profile.name = "Lee";
console.log(source.profile.name);
console.log(copy.profile.name);

Mina
Lee

In ein vorhandenes Ziel kopieren

Verwenden Sie angular.copy(source, destination), wenn ein anderer Teil der Anwendung die Identität des Zielobjekts beibehalten muss. AngularJS kopiert die Quelldaten in dieses Ziel und gibt es zurück. Das ist nützlich, wenn eine Scope-Eigenschaft oder ein anderer Verbraucher bereits eine Referenz auf das Zielobjekt hält. Beispielsweise aktualisiert angular.copy($scope.form, savedForm) das gespeicherte Objekt anhand des aktuellen Formulars und behält dabei die Referenz savedForm bei.

Die beiden Aufrufformen haben unterschiedliche Aufgaben: Mit einem Argument erhalten Sie einen neuen Wert, den Sie speichern können; mit zwei Argumenten aktualisieren Sie ein Objekt, auf das Sie bereits zugreifen. Weisen Sie kein neu zurückgegebenes Objekt zu, wenn anderer Code auf die vorhandene Zielreferenz angewiesen ist.

Formularzustand zurücksetzen und speichern

Erstellen Sie beim Initialisieren des Formulars eine Momentaufnahme: var savedForm = angular.copy($scope.form);. Um die Felder zurückzusetzen und dabei das vorhandene Formularobjekt beizubehalten, verwenden Sie angular.copy(savedForm, $scope.form). Soll die gespeicherte Ausgangsversion durch die aktuellen Änderungen der Person ersetzt werden, verwenden Sie angular.copy($scope.form, savedForm). Das erste Argument ist immer die Quelle, das zweite das Ziel; bei vertauschter Reihenfolge ändert sich auch die Kopierrichtung.

Die Abbildung zeigt ein Namensfeld mit Schaltflächen zum Zurücksetzen und Speichern sowie die angezeigten Formular- und Mitgliedswerte. Diese Werte veranschaulichen den beabsichtigten Zustandsbezug des Beispiels; sie stammen nicht aus einer Laufzeitausführung von AngularJS.

Einschränkungen und nicht unterstützte Werte

Verwenden Sie nicht dasselbe Objekt als beide Argumente: angular.copy(value, value) ist kein unterstützter Aufruf zum Kopieren eines Objekts in sich selbst. Übergeben Sie bei der Aufrufform mit zwei Argumenten ein separates Ziel. Diese Aufrufform verändert außerdem das Zielobjekt: Code, der dessen Referenz hält, sieht den aktualisierten Inhalt.

Das bereitgestellte Aufgabenmaterial enthält weder ein Laufzeitergebnis für AngularJS noch eine maßgebliche API-Referenz. Deshalb verallgemeinert dieser Artikel das Verhalten nicht für jeden JavaScript-Werttyp oder jedes vom Framework verwaltete Objekt. Prüfen Sie die Dokumentation der in Ihrer Anwendung verwendeten Version von AngularJS, bevor Sie sich auf das Kopieren spezieller Werte verlassen. Das ausführbare Referenzbeispiel oben ist ausdrücklich eine JavaScript-Demonstration und kein Beleg dafür, dass ein Aufruf von AngularJS ausgeführt wurde.