Comment ajouter dynamiquement des directives dans AngularJS sans boucle infinie ?

Ajout dynamique de directives avec AngularJS

Lors de la création d'éléments d'interface utilisateur complexes dans AngularJS, il peut être nécessaire d'ajouter dynamiquement des directives à un élément DOM. Une approche pour y parvenir consiste à créer une directive d'ordre supérieur qui gère l'ajout de plusieurs directives.

Implémentation avec compilation conditionnelle

Une méthode consiste à vérifier si le Les directives souhaitées ont déjà été ajoutées avant de tenter de les ajouter. Cette approche implique de définir des vérifications conditionnelles dans la fonction de lien de la directive :

<code class="javascript">angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, element, attrs) {
        if (element.attr('datepicker')) { // Check for existing directive
          return;
        }
        element.attr('datepicker', 'someValue'); // Add directive attribute
        // Add other directive attributes
        $compile(element)(scope);
      }
    };
  });</code>

Cette approche peut cependant entraîner une boucle infinie si les attributs ajoutés ne sont pas correctement supprimés de l'élément.

Solution avec directives de priorité et de terminal

Pour éviter une boucle infinie et garantir une bonne exécution des directives, une combinaison des propriétés de priorité et de terminal peut être utilisée :

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, // Skips compilation of subsequent directives on this element
      priority: 1000, // Executes before other directives
      link: function (scope, element, attrs) {
        // Add tooltip and tooltip placement directives
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        // Remove the directive attribute to prevent recursive compilation
        element.removeAttr("common-things"); 
        element.removeAttr("data-common-things");
        // Compile the element again, including the added directives
        $compile(element)(scope);
      }
    };
  });</code>

Paramètre terminal à true empêche la compilation de directives ultérieures sur le même élément. Une priorité élevée garantit que la directive personnalisée est compilée avant les autres. La suppression ultérieure de l'attribut directive empêche une boucle infinie. Cette approche garantit que les directives ajoutées sont exécutées correctement sans provoquer d'interférence.

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!