Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Objekteigenschaften, die von der AngularJS-Direktive_AngularJS zurückgegeben werden

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

May 16, 2016 pm 03:07 PM
angularjs

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 {};});
Nach dem Login kopieren

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
  };
})

Nach dem Login kopieren
<!-- index.html -->
<div my-directive my-directive1></div>
Nach dem Login kopieren

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
  };  
}) 
Nach dem Login kopieren
 <!-- index.html -->
<my-directive></my-directive>
Nach dem Login kopieren
Wenn repalce false ist, wird der Browser-Quellcode als <my-directive><div>hello world</div></my-directive> gerendert

Wenn es wahr ist, wird es als <div>hello world</div>
angezeigt

7: transclude: Boolean

Kastanie:


&lt;!-- index.html --&gt;
&lt;div my-directive&gt;world&lt;/div&gt;
Nach dem Login kopieren
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: '&lt;div&gt;hello &lt;span ng-transclude&gt;&lt;/span&gt;&lt;/div&gt;'
  };
})
Nach dem Login kopieren
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.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung Jun 15, 2017 pm 05:50 PM

Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung

Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten Jun 27, 2023 pm 07:37 PM

Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten

Erstellen Sie Webanwendungen mit PHP und AngularJS Erstellen Sie Webanwendungen mit PHP und AngularJS May 27, 2023 pm 08:10 PM

Erstellen Sie Webanwendungen mit PHP und AngularJS

Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert Jun 27, 2023 pm 01:34 PM

Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert

Einführung in die Grundlagen von AngularJS Einführung in die Grundlagen von AngularJS Apr 21, 2018 am 10:37 AM

Einführung in die Grundlagen von AngularJS

Wie verwende ich AngularJS in der PHP-Programmierung? Wie verwende ich AngularJS in der PHP-Programmierung? Jun 12, 2023 am 09:40 AM

Wie verwende ich AngularJS in der PHP-Programmierung?

Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS Jun 17, 2023 am 08:49 AM

Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS

So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung May 11, 2023 pm 05:18 PM

So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung

See all articles