


Comment éviter les boucles infinies lors de l'ajout dynamique de directives avec AngularJS ?
Nov 03, 2024 am 01:39 AMAjout dynamique de directives avec AngularJS
Cet article répond à une préoccupation courante dans le développement d'AngularJS : l'ajout de plusieurs directives à un seul élément DOM. L'objectif est de créer une directive qui ajoute certains attributs, tels que datepicker, datepicker-langage et ng-required, à l'élément cible.
Approche originale : vérification des attributs ajoutés
Au départ, le développeur a tenté de vérifier si les attributs nécessaires avaient déjà été ajoutés avant de les ajouter :
<code class="javascript">if (element.attr('datepicker')) { // check return; }</code>
Cependant, cette approche introduisait une boucle infinie lors de l'utilisation de $compile, puisque $compile tenter de traiter les attributs ajoutés.
Approche mise à jour : utilisation de la priorité et du terminal
Après avoir reçu une contribution externe, le développeur s'est rendu compte que la solution nécessitait de définir à la fois la priorité et le terminal. propriétés de la directive personnalisée. Cette approche implique :
- Définir une priorité élevée (par exemple, 1000) pour garantir que la directive personnalisée est compilée en premier.
- Définir le terminal sur true pour empêcher la compilation d'autres directives sur le même élément.
Implémentation
Voici un exemple d'implémentation de la directive utilisant la priorité et le terminal :
<code class="javascript">angular.module('app').directive('superDirective', function ($compile) { return { restrict: 'A', replace: false, terminal: true, priority: 1000, link: function (scope, element, attrs) { // Remove the "superDirective" attribute to avoid looping. element.removeAttr("superDirective"); // Add the necessary attributes. element.attr('datepicker', 'someValue'); element.attr('datepicker-language', 'en'); // Compile the element. $compile(element)(scope); } }; });</code>
Cette approche permet la directive personnalisée pour modifier l'élément et ajouter des attributs, puis utilisez $compile pour compiler toutes les directives, y compris celles ignorées en raison du terminal:true.
Explication
Par en définissant le terminal sur true, la directive personnalisée sera la seule directive compilée sur l'élément cible. Cela évite la compilation redondante et les conflits potentiels. La priorité élevée garantit que la directive personnalisée est compilée en premier, ce qui lui permet de modifier l'élément avant que d'autres directives ne tentent d'y accéder.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript?
