Comment éviter les boucles infinies lors de l'ajout de directives à partir d'une directive Wrapper dans AngularJS ?

Incorporation de plusieurs directives à partir d'une directive wrapper

Vue d'ensemble

Cette question explore comment créer une directive wrapper AngularJS qui ajoute des directives supplémentaires à l'élément qu'elle contient est appliqué à. L'objectif est d'éviter une boucle infinie lors de la tentative d'ajout puis de compilation des nouvelles directives à l'aide de $compile.

Approche

La solution fournie utilise les étapes suivantes :

1. Paramètres de priorité et de terminal :

   • Définissez la priorité de la directive wrapper sur une valeur élevée (par exemple, 1000) à l'aide de la propriété priorité. Cela garantit qu'il s'exécute avant les autres directives sur le même élément.
   • Définissez la propriété du terminal sur true. Cela empêche AngularJS de compiler d'autres directives après l'exécution de la directive wrapper.

2. Compilation de directives :

   • Dans le compilez la fonction de la directive wrapper, ajoutez les directives souhaitées à l'élément à l'aide de element.attr() et supprimez l'attribut de la directive wrapper pour éviter une boucle infinie.
   • $compilez l'élément pour incorporer les directives ajoutées.

Exemple

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function (scope, element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); // Remove the wrapper directive's attribute
        element.removeAttr("data-common-things"); // Also remove the same attribute with data- prefix

        $compile(element)(scope);
      }
    };
  });</code>

Justification

• Définition du terminal : true garantit que la directive wrapper est compilée en premier et que les autres directives sont contournés.
• La suppression de l'attribut de la directive wrapper l'empêche d'être recompilé lors des appels $compile suivants.
• En compilant initialement l'élément sans les attributs de la directive wrapper, l'appel $compile suivant prend soin de compiler toutes les directives ignorées.

Conclusion

Cette approche fournit une solution robuste pour incorporer plusieurs directives à partir d'une directive wrapper tout en évitant le potentiel de boucles infinies. Les propriétés de priorité et de terminal sont cruciales pour obtenir le comportement souhaité, et il est important de supprimer l'attribut de la directive wrapper après avoir modifié l'élément pour empêcher une compilation ultérieure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!