Comment ajouter des directives à partir d'une directive parent dans AngularJS sans boucles infinies ?

Ajout de directives à partir d'une directive parent dans AngularJS

Dans AngularJS, on peut rencontrer le besoin d'ajouter des directives supplémentaires à un élément qui est déjà équipé d'une directive parentale. Bien que le service $compile offre les moyens d'y parvenir, il est crucial d'éviter les boucles infinies.

Pour éviter ce problème, il est conseillé d'examiner si les attributs requis ont déjà été ajoutés à l'élément. Cependant, lors de l'utilisation de $compile pour mettre à jour l'élément, les directives ne seraient pas initialisées.

Cette approche est-elle appropriée ?

L'approche susmentionnée est généralement valable ; cependant, des ajustements peuvent être nécessaires pour garantir une fonctionnalité appropriée.

Méthode alternative

Une solution alternative consiste à exploiter la propriété priorité pour séquencer l'application des directives sur un seul élément. Les directives avec des valeurs de priorité plus élevées sont exécutées en premier. En attribuant une priorité élevée à la directive parent, il peut garantir que son initialisation précède celle des directives enfants.

Ajustement de la directive

Sur la base de la discussion, ce qui suit La version révisée de la directive fournit une solution réalisable.

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true, // Prevent subsequent directives from executing
      priority: 1000, // Assign a high priority for early execution
      compile: function compile(element, attrs) {
        // Add additional attributes
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');

        // Remove the parent directive attribute to avoid looping
        element.removeAttr('common-things');
        element.removeAttr('data-common-things');

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) { },
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          },
        };
      },
    };
  });</code>

Cette directive mise à jour ajoute efficacement les attributs souhaités tout en empêchant les boucles infinies. Il utilise la propriété terminal pour arrêter l'exécution des directives suivantes, garantissant qu'elles sont appliquées une fois les directives enfants initialisées.

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!