AngularJS unterstützt benutzerdefinierte Tag-Eigenschaften und fügt benutzerdefinierte Inhalte hinzu, ohne die DOM-Knotenoperationen zu verwenden.
Die vier Hauptmerkmale von AngularJs werden früher erwähnt:
1 MVC
2 Modular
3 Anweisungen
4 Zwei-Wege-Datenbindung
Das Folgende wird eingeführt:
1 So passen Sie den Befehl an
2 Verwendung benutzerdefinierter Anweisungen
3 Inline -Verwendung von benutzerdefinierten Richtlinien
Wie man Richtlinien anpassen:
Angular ist ein modulbasiertes Framework, sodass Sie Ihr eigenes Modul erstellen müssen:
var myappmodule = angular.module ("myapp", []);
Erstellen Sie dann die Richtlinie auf diesem Modul
MyAppModule.directive ("Xingoo", function () {return {Restrict: 'aecm', Vorlage: '<Div> Hallo, meine Anweisung </div>', Ersatz: true}});Unter ihnen ist Xingoo der Name unseres benutzerdefinierten Tags, gefolgt von seiner Methodenfunktion.
Die Funktion gibt eine Schlüsselwertpaarkombination zurück, die die Verwendungsmethoden, Eigenschaften usw. des Tags definiert.
Mal sehen, was es definiert:
1 Einschränkung: Definiert die Nutzungsmethoden von Tags mit insgesamt vier Typen, nämlich AECM
2 Vorlage: Definieren Sie die Vorlage für das Tag. Im Inneren befindet sich eine Zeichenfolge, mit der benutzerdefinierte Tags ersetzt werden
3 Austausch: Ob Sie den Austausch unterstützen möchten
4 Transclude: Ob eingebettet wird
So verwenden Sie den Befehl:
Die oben genannten vier Möglichkeiten, Etiketten zu verwenden, nämlich AECM.
Ein Attribut: als Attribut verwendet
<div xingoo> </div>
E Element: Als Etikettelement wird verwendet
<xingoo> </xingoo>
C Klasse: Wird als CSS -Stil verwendet
<div> </div>
M Kommentare Kommentare: Wird als Kommentare verwendet (diese Methode ist in Version 1.2 nicht verfügbar!)
<!-Richtlinie: Xingoo->
<div> </div>
Im Allgemeinen wird empfohlen, es als Attribute und Elemente zu verwenden.
Wenn Sie Attribute für vorhandene HTML -Tags erweitern möchten, verwenden Sie die Attributmethode.
Wenn Sie das Tag anpassen möchten, nehmen Sie die Form eines Tags an.
Um diese Methode zu verwenden, müssen Sie den entsprechenden Buchstaben in der Einschränkung in der Definitionsrichtlinie deklarieren.
Inline -Nutzung von Richtlinien:
Da andere Tags im Tag verschachtelt werden können, benötigen Sie, wenn Sie andere Element -Tags in einem benutzerdefinierten Tag nisten möchten: Sie benötigen:
1 Verwenden Sie die Transclude -Eigenschaft, die auf True eingestellt ist.
2 und verwenden Sie die NG-Transclude-Eigenschaft, um den internen verschachtelten Standort zu definieren.
Der Code ist wie folgt:
MyAppmodule.directive ("test", function () {retrict {prestrict: 'aecm', übersetzen: true, template: "<div> haha! <div ng-transclude> </div> wuwu! </div>"}});Alle Codes
<! docType html> <html ng-app = "myapp"> <kopf> <meta http-äquiv = "content-type" content = "text /html; charSet = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <xingoo> </xingoo> <div Xingoo> </div> </div> <! <xingoo> 3333 </xingoo> <hr> <test> 4444 </test> <script type = "text/javaScript"> var myappmodule = angular.module ("myapp", []); MyAppModule.directive ("Xingoo", function () {return {Restrict: 'aecm', Vorlage: '<Div> Hallo, meine Anweisung </div>', Ersatz: true}}); MyAppmodule.directive ("test", function () {return {prestrict: 'aecm', transclude: true, template: "<div> haha! <div ng-transclude> </div> wuwu! </div>"}); </script> </body> </html>Auslaufergebnisse
Das obige Informationen ist die Informationen, die die benutzerdefinierten AngularJS -Anweisungen aussortieren. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!