Wie vermeide ich Endlosschleifen beim Hinzufügen von Direktiven aus einer Wrapper-Direktive in AngularJS?

Einbinden mehrerer Direktiven aus einer Wrapper-Direktive

Übersicht

Diese Frage untersucht, wie man eine Wrapper-AngularJS-Direktive erstellt, die dem Element zusätzliche Direktiven hinzufügt wird angewendet auf. Das Ziel besteht darin, eine Endlosschleife zu vermeiden, wenn versucht wird, die neuen Anweisungen mit $compile hinzuzufügen und dann zu kompilieren.

Ansatz

Die bereitgestellte Lösung verwendet die folgenden Schritte:

1. Prioritäts- und Terminaleinstellungen:

   • Setzen Sie die Priorität der Wrapper-Direktive mithilfe der Prioritätseigenschaft auf einen hohen Wert (z. B. 1000). Dadurch wird sichergestellt, dass es vor anderen Anweisungen für dasselbe Element ausgeführt wird.
   • Setzen Sie die Terminaleigenschaft auf true. Dies verhindert, dass AngularJS nach der Ausführung der Wrapper-Direktive weitere Anweisungen kompiliert.

2. Anweisungskompilierung:

   • In der Kompilieren Sie die Funktion der Wrapper-Direktive, fügen Sie die gewünschten Direktiven zum Element mit element.attr() hinzu und entfernen Sie das Attribut der Wrapper-Direktive, um eine Endlosschleife zu verhindern.
   • $kompilieren Sie das Element, um die hinzugefügten Direktiven zu integrieren.

Beispiel

<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>

Begründung

• Die Einstellung terminal: true stellt sicher, dass die Wrapper-Direktive zuerst kompiliert wird und andere Anweisungen werden umgangen.
• Das Entfernen des Attributs der Wrapper-Direktive verhindert, dass es in nachfolgenden $compile-Aufrufen erneut kompiliert wird.
• Durch das anfängliche Kompilieren des Elements ohne die Attribute der Wrapper-Direktive wird der nachfolgende $compile-Aufruf ausgeführt Achten Sie darauf, alle übersprungenen Anweisungen zu kompilieren.

Fazit

Dieser Ansatz bietet eine robuste Lösung für die Einbindung mehrerer Anweisungen aus einer Wrapper-Anweisung und vermeidet gleichzeitig die Möglichkeit von Endlosschleifen. Die Prioritäts- und Terminaleigenschaften sind entscheidend, um das gewünschte Verhalten zu erreichen, und es ist wichtig, das Attribut der Wrapper-Direktive nach der Änderung des Elements zu entfernen, um eine weitere Kompilierung zu verhindern.

Das obige ist der detaillierte Inhalt vonWie vermeide ich Endlosschleifen beim Hinzufügen von Direktiven aus einer Wrapper-Direktive in AngularJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!