Detaillierte Erläuterung der Objekteigenschaften, die von der AngularJS-Direktive_AngularJS zurückgegeben werden

Vorab geschrieben: Da der Direktiventeil in AngularJS oberste Priorität hat, wird er in mehreren Kapiteln erläutert. In diesem Kapitel werden hauptsächlich die einfacheren Attribute im Objekt erläutert, das von der Direktive

zurückgegeben wird

Directive() wird in AngularJS verwendet, um Anweisungen zu definieren: Name (der Name der Anweisung), Factory_Function (diese Funktion definiert alle Verhaltensweisen der Anweisung und gibt ein Objekt zurück)

Kastanie:

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

Das zurückgegebene Objekt enthält die folgenden Eigenschaften und Methoden:

1: einschränken: Zeichenfolge

Dieses Attribut wird verwendet, um die Form zu beschreiben, in der die myDirective-Direktive im DOM deklariert wird (d. h. dort, wo sie in HTML verwendet werden soll)
Die optionalen Werte dieses Attributs sind: E (Element), A (Attribut, Standardwert), C (Klassenname), M (Kommentar), die einzeln oder in Kombination
verwendet werden können Ich habe ein Sprichwort gesehen: Wenn Sie eine unabhängige Befehlsfunktion anpassen möchten, das heißt, der Befehl kann eine Reihe von Vorgängen unabhängig voneinander ausführen, ohne auf andere Elemente, Attribute usw. angewiesen zu sein, definieren Sie den Befehl bei Bedarf als Element So verwenden Sie diesen Befehl: Um die Funktionalität einer vorhandenen Direktive zu erweitern, definieren Sie sie als Attribut. Ich weiß nicht, ob dieses Verständnis vernünftig ist, aber es handelt sich tatsächlich um einen guten Auswahlmethodenstandard, der als Referenz verwendet werden kann

2: Priorität: Nummer

Dieses Attribut wird verwendet, um die Priorität der Anweisung zu definieren (der Standardwert ist 0, ngRepeat hat die höchste Priorität unter allen integrierten Anweisungen, nämlich 1000. Diejenige mit der höheren Priorität wird zuerst ausgeführt).

3: Terminal: Boolean

Dieses Attribut hängt mit dem Prioritätsattribut zusammen. Es wird verwendet, um zu bestimmen, ob die Ausführung von Anweisungen mit einer niedrigeren Priorität als dieser Anweisung für das aktuelle Element gestoppt werden soll, aber dennoch dieselbe Priorität ausgeführt wird
Kastanie:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'AE',
    priority: 1,
    template: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

Wenn die myDirective1-Direktive nicht definiert ist, zeigt der Browser „Hallo Welt“ an, aber nachdem die myDirective1-Direktive hinzugefügt, ihre Priorität auf einen höheren Wert als myDirective gesetzt und das Terminalattribut für myDirective1 auf „true“ gesetzt wurde, wird die Ausführung gestoppt myDirective-Direktive.

4: Vorlage: String/Funktion

Dieses Attribut definiert eine Vorlage (d. h. der Teil, der diese Anweisung in der HTML-Datei verwendet, ersetzt den Inhalt der Vorlage, sodass die Vorlage hauptsächlich im HTML-Format vorliegt)
Attribute gibt es in zwei Formen: als HTML-Text und als Funktion, die eine Vorlagenzeichenfolge zurückgibt. Die Funktion empfängt zwei Parameter: tElement, tAttrs

5: templateUrl: String/Funktion

Wenn es viele Vorlageninhalte gibt, erscheint die direkte Verschachtelung in der Vorlage überflüssig. Sie können den Vorlagencode in einer separaten Datei speichern. In diesem Fall müssen Sie die Datei TemplateUrl importieren 🎜> Attribute gibt es auch in zwei Formen: eine Zeichenfolge, die den Pfad einer externen HTML-Datei darstellt, und eine Funktion, die eine Zeichenfolge des Pfads zu einer externen HTML-Datei zurückgibt. Diese Funktion empfängt zwei Parameter: tElement, tAttrs

6: ersetzen: Boolean

Der Standardwert dieses Attributs ist false und gibt an, ob die Vorlage als untergeordnetes Element in das Element eingefügt wird, das diese Direktive aufruft, oder ob das Element, das diese Direktive aufruft, überschrieben und ersetzt wird.

Kastanie:

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
  return {
    restrict: 'A',
    template: '<div>hello world</div>',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

Wenn repalce false ist, wird der Browser-Quellcode als

hello world

gerendert

Wenn es wahr ist, wird es als

hello world

angezeigt

7: transclude: Boolean

Kastanie:

<!-- index.html -->
<div my-directive>world</div>

Wenn wie in diesem Beispiel Inhalte in der Anweisung vorhanden sind, überschreibt und ersetzt die Vorlage den Inhalt normalerweise direkt, aber jetzt möchte ich ihn behalten, und hier kommt Transclude zum Einsatz

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

Der obige js-Code bettet die in der HTML-Dateianweisung enthaltene Welt in das span-Element in der Vorlage ein. Beachten Sie, dass das span-Element das integrierte Anweisungsattribut ng-transclude hinzufügt (dies ist sehr wichtig)

Kurz gesagt besteht der Zweck dieses Attributs darin, den AngularJS-Compiler anzuweisen, den Inhalt, den er vom DOM-Element erhält, dort abzulegen, wo er die ng-transclude-Direktive findet.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.