Comment copier avec angular.copy dans AngularJS

angular.copy est une API AngularJS qui permet de copier une valeur, généralement un objet ou un tableau, afin que les modifications apportées à la copie ne modifient pas l’original par le biais de références partagées à des objets imbriqués. Ce guide présente les deux formes d’appel et un modèle d’utilisation pour l’état d’un formulaire. Il concerne AngularJS ; Angular moderne ne fournit pas cette API AngularJS.

Comprendre le comportement de copie profonde de angular.copy

Une copie superficielle crée un nouvel objet externe, mais peut laisser les objets imbriqués partagés. Une copie profonde recopie récursivement les données imbriquées : modifier une propriété imbriquée dans la copie ne modifie donc pas cette propriété dans la source. Il faut comprendre cette distinction en termes d’états d’objet indépendants ; une copie profonde ne garantit pas une disposition physique particulière en mémoire.

Par exemple, si source.profile est un objet, après copy = angular.copy(source), modifier copy.profile.name laisse source.profile.name inchangé. C’est utile lorsqu’un formulaire ou un éditeur a besoin d’une version de travail des données tout en conservant une base distincte pour réinitialiser le formulaire.

Copier sans destination

Appelez angular.copy(source) avec un seul argument pour créer et renvoyer une nouvelle copie. Conservez la valeur renvoyée, par exemple var savedForm = angular.copy($scope.form);. La source originale reste disponible, tandis que savedForm peut servir d’instantané pour une comparaison ou une réinitialisation ultérieure.

L’exemple JavaScript de référence exécutable ci-dessous montre pourquoi un état imbriqué doit être copié indépendamment. Il utilise l’opération structuredClone du langage, et non AngularJS : sa sortie illustre uniquement le comportement des références et ne teste pas angular.copy.

Exécutez cet exemple JavaScript de référence. Il affiche d’abord Mina, le nom conservé dans la source, puis Lee, le nom modifié dans la copie ; ces valeurs restent telles quelles dans l’exemple.

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

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

Copier dans une destination existante

Utilisez angular.copy(source, destination) lorsqu’une autre partie de l’application doit conserver l’identité de l’objet de destination. AngularJS copie les données de la source dans cette destination et la renvoie. Cette forme est utile lorsqu’une propriété de portée ou un autre élément de l’application détient déjà une référence à l’objet de destination. Par exemple, angular.copy($scope.form, savedForm) met à jour l’objet enregistré à partir du formulaire actuel tout en conservant la référence savedForm.

Les deux formes répondent à des besoins différents : celle à un argument fournit une nouvelle valeur à stocker ; celle à deux arguments met à jour un objet que vous détenez déjà. Évitez d’affecter un nouvel objet renvoyé si d’autres parties du code dépendent de la référence à la destination existante.

Réinitialiser et enregistrer l’état d’un formulaire

Créez un instantané lors de l’initialisation du formulaire : var savedForm = angular.copy($scope.form);. Pour réinitialiser les champs tout en conservant l’objet formulaire existant, utilisez angular.copy(savedForm, $scope.form). Pour remplacer la base enregistrée par les modifications actuelles de l’utilisateur, utilisez angular.copy($scope.form, savedForm). Le premier argument est toujours la source et le second la destination ; les inverser inverse le sens de la copie.

L’illustration montre un champ de nom, des commandes de réinitialisation et d’enregistrement, ainsi que les valeurs affichées du formulaire et du membre. Ces valeurs aident à comprendre la relation d’état visée par l’exemple ; elles ne proviennent pas de l’exécution d’un environnement AngularJS.

Limites et valeurs non prises en charge

N’utilisez pas le même objet comme deux arguments : angular.copy(value, value) n’est pas un appel de copie de soi pris en charge. Avec la forme à deux arguments, transmettez une destination distincte. Cette forme modifie aussi la destination : tout code qui détient une référence à cet objet verra son contenu mis à jour.

Les éléments fournis pour cette tâche ne contiennent ni résultat d’exécution de AngularJS ni référence API faisant autorité. Cet article ne généralise donc pas le comportement à tous les types de valeurs JavaScript ou aux objets gérés par un framework. Consultez la documentation de la version AngularJS utilisée par votre application avant de vous fier à la copie de valeurs particulières. L’exemple de référence exécutable ci-dessus est explicitement une démonstration JavaScript, et non la preuve qu’un appel à AngularJS a été exécuté.