Für Anweisungen können sie einfach als Funktionen verstanden werden, die auf bestimmten DOM -Elementen ausgeführt werden, und Anweisungen können die Funktionen dieses Elements erweitern.
Schauen wir uns zunächst einen vollständigen Parameterbeispiel an und stellen dann die Funktionen und Verwendungen jedes Parameters im Detail ein:
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // Return an object or connection function, as shown below: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... }, Post: Funktion (Scope, Ielement, Iattrs, Controller) {...}} Rückgabefunktion Postlink (...) {...}}};einschränken [String]
Einschränkung ist ein optionaler Parameter. Wird verwendet, um in Form der Anweisung festzulegen, die in der DOM deklariert wird. Der Standardwert ist a, dh er wird in Form eines Attributs deklariert.
Die optionalen Werte sind wie folgt:
E (Element)
<my-directive> </my-directive>
A (Eigenschaft, Standardwert)
<div my-directive = "Expression"> </div>
C (Klassenname)
<div> </div>
M (Anmerkung)
<-Richtlinie: My-Directive Expression->
In Anbetracht der Kompatibilität des Browsers wird im Allgemeinen empfohlen, die Standardattribute sofort in Form von Attributen zu deklarieren. Die letzte Methode wird empfohlen, den Qualifikationsindex nicht zu verwenden, wenn er nicht erforderlich ist.
Code:
Angular.module ('App', []) .directive ('mydirective', function () {retrict {prestrict: 'e', Vorlage: '<a href = "http://www.baidu.com"> baidu </a>'};}) htmlcode: <my-directive> </my-directive>Wirkung:
Priorität [int]
Die meisten Anweisungen ignorieren diesen Parameter und verwenden den Standardwert 0, aber einige Szenarien sind sehr wichtig oder sogar erforderlich, um eine hohe Priorität festzulegen. Zum Beispiel legt NGrepeat diesen Parameter auf 1000 fest, sodass er sicherstellen kann, dass er im selben Element immer vor anderen Anweisungen aufgerufen wird.
Terminal [bool]
Dieser Parameter wird verwendet, um die Ausführung von Anweisungen für das aktuelle Element mit einer geringeren Priorität als diese Anweisung zu stoppen. Anweisungen mit der gleichen Priorität wie die aktuelle Anweisung werden jedoch weiterhin ausgeführt.
Zum Beispiel: NGIF hat eine Priorität, die etwas höher ist als NGView (es handelt sich tatsächlich um Terminalparameter). Wenn der Expressionswert von NGIF wahr ist, kann NGView normal ausgeführt werden, aber wenn der Wert des NGIF -Ausdrucks falsch ist, wird NGView nicht ausgeführt, da die Priorität von NGView niedrig ist.
Vorlage [String oder Funktion]
Der Vorlageparameter ist optional und muss auf eine der folgenden zwei Formulare eingestellt werden:
Ein Stück HTML -Text;
Eine Funktion, die zwei Parameter akzeptieren kann, die Parameter sind Telemente und Tattrs und gibt eine Zeichenfolge zurück, die die Vorlage darstellt. t in Telement und Tattrs steht für Vorlage im Verhältnis zur Beispiel.
Lassen Sie uns zunächst die zweite Verwendung demonstrieren:
Angular.module ('App', []) .Directive ('myDirective', function () {retrict {crestrict: 'eac', Vorlage: Funktion (Elem, Attr) {return "<a href = '" + attr.value + "'>" + attr.Text + "</a>";}}};HTMLCODE: (Der Effekt ist der gleiche wie oben, es wird keine Demonstration getroffen)
<my-directive value = "http://www.baidu.com" text = "baidu"> </my-directive> <div my-directive value = "http://www.baidu.com" Text = "Baidu"> </div>
Templateurl [String oder Funktion]
Templateurl ist ein optionaler Parameter, der vom folgenden Typ sein kann:
Eine Zeichenfolge, die den Pfad einer externen HTML -Datei darstellt;
Eine Funktion, die zwei Parameter akzeptieren kann, die Parameter sind Telemente und Tattrs und gibt einen String mit dem Pfad der externen HTML -Datei zurück.
In beiden Fällen wird die URL der Vorlage durch die integrierte Sicherheitsschicht von NG weitergeleitet, insbesondere $ getTrustedresourceurl, was die Vorlage vor nicht vertrauenswürdigem Quellen vor geladenen Vorlagen schützt. Bei der Aufruf der Anweisung wird die HTML -Vorlagendatei standardmäßig über AJAX im Hintergrund angefordert. Wenn Sie eine große Anzahl von Vorlagen beladen, verlangsamen Sie eine Client -Anwendung stark. Um eine Latenz zu vermeiden, können HTML -Vorlagen vor der Bereitstellung der Anwendung zwischengespeichert werden.
Code:
Angular.module ('App', []) .Directive ('mydirective', function () {retrict {prestrict: 'aec', templateurl: function (elem, attr) {return attr.value +.ersetzen [bool]
Ersetzen ist ein optionaler Parameter. Wenn dieser Parameter festgelegt ist, muss der Wert wahr sein, da der Standardwert falsch ist. Der Standardwert bedeutet, dass die Vorlage in das Element eingefügt wird, das diese Richtlinie als untergeordnetes Element nennt.
Zum Beispiel lautet der Standardwert des obigen Beispiels der generierte HTML -Code wie folgt:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </my-directive>
Wenn ersetzt = true ist festgelegt
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
Nach meiner Beobachtung zeigt dieser Effekt nur dann einen tatsächlichen Effekt, wenn einschränken = "e" ist.
Nach der Einführung der grundlegenden Anweisungsparameter sind wichtigere Umfangsparameter beteiligt ...
Umfang Parameter [BOOL oder Objekt]
Der Umfangsparameter ist optional und kann auf true oder ein Objekt eingestellt werden. Der Standardwert ist falsch.
Wenn mehrere Richtlinien für ein Element Isolationsumfang verwenden, kann nur einer von ihnen wirksam werden. Nur das Stammelement in der Anweisungsvorlage kann einen neuen Bereich erhalten. Daher wird der Umfang standardmäßig für diese Objekte auf True gesetzt. Die Funktion der integrierten Richtlinie NG-Controller besteht darin, aus dem übergeordneten Bereich zu erben und einen neuen Kinderbereich zu erstellen. Es schafft ein neues Kind, das aus dem Elternbereich geerbt wurde. Die Vererbung hier wird nicht ausführlich beschrieben und ist im Grunde genommen das gleiche wie das Vererbung in objektorientiertem.
Lassen Sie uns zunächst einen Code analysieren:
<div ng-app="app" ng-init="name= 'grandfather'"> <div ng-init="name='father'"> First generation: {{ name }} <div ng-init="name= 'son'" ng-controller="SomeController"> Second generation: {{ name }} <div ng-init="name='grandson'"> Third generation: {{ Name}} </div> </div> </div> </div> </div> </div>Wir fanden heraus, dass die erste Generation den Namen als Vater initialisieren, aber die zweite Generation und die dritte Generation sind tatsächlich der gleiche Rahmen, so dass ihr Name tatsächlich ein Objekt ist, sodass die Auswirkung davon wie folgt ist:
Erste Generation: Vater
Zweite Generation: Enkel
Dritte Generation: Enkel
Wir ändern den Code, um die dritte Generation zu isolieren und dann den Effekt zu überprüfen:
<div ng-app="app"ng-init="name= 'grandfather'"> <div ng-init="name='father'"> First generation: {{ name }} <div ng-init="name= 'son'" ng-controller="SomeController"> Second generation: {{ name }} <div ng-init="name='grandson'" ng-controller = "SecondController"> dritte Generation: {{Name}} </div> </div> </div> </div> </div> </div> Angular.module ('App', []) .Controller ('SomeController', Funktion ($ Scope) {}) .Controller ('SecondController', Funktion ($ scope) {})Die Effekte sind wie folgt:
Erste Generation: Vater
Zweite Generation: Sohn
Dritte Generation: Enkel
Schauen wir uns nach dem Ändern des Codes das Erbe an:
<div ng-app="app"ng-init="name= 'Grandfather'"> <div> First generation: {{ name }} <div ng-controller="SomeController"> Second generation: {{ name }} <div ng-controller="SecondController"> Third generation: {{ name }} </div> </div> </div> </div> </div> </div>Die Effekte sind wie folgt:
Die erste Generation: Großvater Kuss
Die zweite Generation: Großvater Kuss
Die dritte Generation: Großvater Kuss
Wenn Sie eine Richtlinie erstellen möchten, die den Umfang eines externen Prototyps erben und die SCOPE -Eigenschaft auf True einstellen kann, ist es einfach eine vererbbare Isolation, dh sie kann den übergeordneten Umfang nicht umgekehrt beeinflussen.
Schauen wir uns ein anderes Beispiel an:
angular.module('myApp', []) .controller('MainController', function ($scope) { }) .directive('myDirective', function () { return { restrict: 'A', scope:false,//Switch to {}, true test priority: 100, template: '<div>Internal:{{ myProperty }}<input ng-model = "MyProperty"/> </div> '};HTML -Code:
<div ng-controller = 'MainController' ng-init = "MyProperty = 'Hallo Welt!
Wenn wir den Umfangswert ändern, werden wir finden
Falsch: Erbe, aber nicht isolieren
Richtig: Erbe und Isolat
{}: Isoliert und nicht vererbt
transkluden
Transclude ist ein optionaler Parameter. Der Standardwert ist falsch. Das Einbetten wird häufig zum Erstellen wiederverwendbarer Komponenten verwendet. Ein typisches Beispiel ist ein modales Dialogfeld oder eine Navigationsleiste. Wir können die gesamte Vorlage, einschließlich der darin enthaltenen Anweisungen, in eine Anweisung übergeben, indem wir sie einbetten. Die Innere der Direktive kann auf den Umfang der externen Richtlinie zugreifen, und die Vorlage kann auch auf die externen Zielfernrohrobjekte zugreifen. Um den Umfang einzugeben, muss der Wert des Parameters des Geltungsbereichs so eingestellt werden, dass das Zielfernrohr durch {} oder true isoliert wird. Wenn der Umfangsparameter nicht festgelegt ist, wird der Umfang in der Direktive auf den Umfang der eingehenden Vorlage gesetzt.
Verwenden Sie Transclude: Richtig nur, wenn Sie eine Anweisung erstellen möchten, die Inhalte enthalten kann.
Schauen wir uns zwei Beispiele an - Navigationsleiste:
<div Side-Box> <div> <a href = ""> Graphics </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> Front-end </a> <a href = ""> startup </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
JSCODE:
Angular.module ('MyApp', []) .directive ('sidbox', function () {retrict {prestrict: 'ea', Scope: {title: '@'}, übersetzen: true, template: '<div> <div> <H2>' + '{{title}}} </h2> <span ng ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’’ ’.Dieser Code teilt dem NG-Compiler mit, dass er das, was er vom DOM-Element erhält, die NG-Transclude-Richtlinie entdeckt.
Schauen wir uns ein Beispiel der offiziellen Website an:
Angular.Module ('docsisofnbIndexample', []) .Controller ('Controller', ['$ scope', '$ timeout', Funktion ($ scope, $ timeout) {$ scope.name = 'tobias'; false;}, 2000);my-dialog-close.html
my-dialog-close.html <div> <a href ng-klick = "close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "Controller"> <my-dialog ng-hide = "dialogishidden" on-close = "hidedealog ()"> Überprüfen Sie den Inhalt, {{name}}! </my-dialog> </div>Wenn der Befehl den Transclude -Parameter verwendet, kann der Controller Änderungen im Datenmodell normalerweise nicht überwachen. Es wird empfohlen, den $ Watch -Dienst in der Linkfunktion zu verwenden.
Controller [String oder Funktion]
Der Controller -Parameter kann eine Zeichenfolge oder eine Funktion sein. Wenn der Konstruktor des in der Anwendung registrierten Controllers auf eine Zeichenfolge gesetzt ist, wird mit dem Wert der Zeichenfolge als Name gefunden.
Angular.module ('MyApp', []) .Directive ('mydirective', function () {Einschränkung: 'a', Controller: 'SomeController'})Ein Inline -Controller kann durch einen anonymen Konstruktor innerhalb der Anweisung definiert werden.
Angular.module ('MyApp', []) .Directive ('myDirective', function () {begrenzt: 'a', controller: function ($ scope, $ element, $ attrs, $ transclude) {// Die Controller -Logik wird hier platziert}});Wir können jeden NG -Dienst injizieren, der in den Controller injiziert werden kann, und wir können ihn in den Anweisungen verwenden. Es gibt auch einige spezielle Dienste im Controller, die in die Anweisungen injiziert werden können. Diese Dienste umfassen:
1. $ Scope
Der aktuelle Umfang, der dem Richtlinienelement zugeordnet ist.
2. $ Element
Das Element, das der aktuellen Anweisung entspricht.
3. $ attrs
Ein Objekt, das aus Attributen des aktuellen Elements besteht.
<div id = "adiv" class = "box"> </div> hat das folgende Attributobjekt: {id: "adiv", class: "box"}4. $ transclude
Die Einbettverbindungsfunktion wird mit dem entsprechenden Einbettungsbereich vorab. Die Transclude -Link -Funktion ist eine Funktion, die tatsächlich zum Klonelementen ausgeführt und das DOM betrieben wird.
Angular.module ('MyApp', []) .directive ('mylink', function () {retrict {begrenzt: 'ea', transclude: true, controller: function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function (clone) {var a = angular. A.Text (Clone.Text ()); }) ;;html
<my-link value = "http://www.baidu.com"> baidu </my-link>
<div my-link value = "http://www.google.com"> Google </div>
Es wird empfohlen, TranscludeFN nur in Kompilierparametern zu verwenden. Die Verbindungsfunktion kann Anweisungen voneinander isolieren, während der Controller wiederverwendbares Verhalten definiert. Wenn wir die API der aktuellen Anweisung anderen Anweisungen aussetzen möchten, können wir den Controller -Parameter verwenden. Andernfalls können wir Link verwenden, um die Funktionalität des aktuellen Anweisungselements (d. H. Interne Funktionen) zu konstruieren. Wenn wir Scope verwenden. $ Watch () oder in Echtzeit mit DOM -Elementen interagieren, ist die Verwendung von Links eine bessere Wahl. Bei der Einbettung kann sich das vom Bereich des Controller widerspiegelnde Bereichs von dem unterscheiden, was wir erwartet haben. In diesem Fall kann das $ Scope -Objekt nicht normal aktualisiert werden. Wenn Sie auf dem aktuellen Bildschirm mit dem Umfang des Umfangs interagieren möchten, können Sie den in die Verbindungsfunktion übergebenen Parameter verwenden.
Controlleras [String]
Der Controlleras -Parameter wird verwendet, um den Alias des Controllers so einzustellen, dass der Controller in der Ansicht referenziert werden kann, ohne dass $ Scope überhaupt injiziert wird.
<div ng-controller = "MainController als main"> <Eingabe type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </div>JSCODE:
Angular.module ('MyApp', []) .Controller ('MainController', function () {this.name = "Halower";});Der Alias des Controllers ermöglicht Routing und Anweisungen, um anonyme Controller zu erstellen. Diese Fähigkeit kann dynamische Objekte in Controller erzeugen, und das Objekt ist isoliert und leicht zu testen.
erfordern [String oder String []]
Erfordernis ist eine Zeichenfolge, die den Namen einer anderen Anweisung darstellt. Forderung wird den Controller in den Anweisungen injiziert und als viertes Parameter der Verbindungsfunktion der aktuellen Anweisung dient. Der Wert eines String- oder Array -Elements ist der Anweisungsname, der im Bereich der aktuellen Anweisung verwendet wird. In jedem Fall bezieht sich der NG -Compiler auf die Vorlage der aktuellen Anweisung, wenn sie nach einem Subcontroller suchen.
Kompilieren Sie 【Objekt oder Funktion】
Die Kompilierungsoption selbst wird nicht häufig verwendet, die Verbindungsfunktion wird jedoch häufig verwendet. Wenn wir die Linkoption festlegen, erstellen wir im Wesentlichen eine Postlink () -Linkfunktion, damit die Funktion compile () die Link -Funktion definieren kann. Wenn die Kompilierungsfunktion festgelegt ist, bedeutet dies normalerweise, dass wir DOM-Vorgänge ausführen möchten, bevor die Anweisungen und Echtzeitdaten in das DOM eingereicht werden. Es ist sicher, DOM -Operationen wie das Hinzufügen und Löschen von Knoten in dieser Funktion durchzuführen.
Die Kompilierungs- und Verknüpfungsoptionen schließen sich gegenseitig aus. Wenn diese beiden Optionen zur gleichen Zeit festgelegt werden, wird die von Compile zurückgegebene Funktion als Linkfunktion angesehen und die Link -Option selbst wird ignoriert.
Die kompilierte Funktion ist für die Konvertierung des Vorlagen -DOM verantwortlich. Die Verbindungsfunktion ist für die Verknüpfung des Umfangs und des DOM verantwortlich. Das DOM kann manuell betrieben werden, bevor der Bereich mit dem DOM verbunden ist. In der Praxis ist diese Art von Operation sehr selten beim Schreiben benutzerdefinierter Anweisungen, aber es gibt mehrere integrierte Anweisungen, die solche Funktionen liefern.
Link
kompilieren: function (Tele, tattrs, translateFn) {// Todo: Return -Funktion (Scope, Ele, Attrs) {// Link -Funktion};Die Linkfunktion ist optional. Wenn eine kompilierte Funktion definiert ist, wird die verknüpfte Funktion zurückgegeben. Wenn beide Funktionen definiert sind, überlädt die kompilierte Funktion die verknüpfte Funktion. Wenn unsere Anweisungen einfach sind und keine zusätzlichen Einstellungen erfordern, können wir eine Funktion aus der Fabrikfunktion (Rückruffunktion) zurückgeben, um das Objekt zu ersetzen. In diesem Fall ist diese Funktion die Linkfunktion.
ngmodel
Es bietet eine zugrunde liegende API, um Daten im Controller zu verarbeiten. Diese API wird verwendet, um Datenbindung, Überprüfung, CSS -Update und andere Dinge zu verarbeiten, die das DOM nicht tatsächlich betreiben. Der NGModel Controller wird zusammen mit dem NGModel, der einige Methoden enthält, in die Anweisungen injiziert. Um auf den ngmodelController zuzugreifen, müssen Sie die Forderungseinstellungen verwenden.
Gemeinsame Elemente von NgmodelController sind wie folgt:
1. Um den Ansichtswert im Umfang festzulegen, muss die Funktion ngmodel. $ SetViewValue () aufgerufen werden.
Die $ setViewValue () -Methode eignet sich zum Anhören von benutzerdefinierten Ereignissen in benutzerdefinierten Direktiven (z. B. Verwendung eines JQuery -Plugins mit Callback -Funktionen). Wir möchten $ ViewValue festlegen und Digest Loops ausführen, wenn der Rückruf aufgerufen wird.
Angular.module ('MyApp') .Directive ('myDirective', function () {return {fordere: '? ngmodel', link: function (scope, ele, attrs, ngmodel) {if (! ngmodel) return; Scope. $ anwenden () {ngmodel. $ setViewValue (Datum);}); }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. Die $ Render -Methode kann die spezifische Rendering -Methode der Ansicht definieren
3. Eigenschaften
1. $ ViewValue
Die $ ViewValue -Eigenschaft enthält die tatsächliche Zeichenfolge, die für die Aktualisierung der Ansicht erforderlich ist.
2. $ modelValue
$ modelValue wird vom Datenmodell gehalten. $ modelValue und $ ViewValue können unterschiedlich sein, je nachdem, ob die $ Parser -Pipeline darauf arbeitet.
3. $ Parsers
Der Wert von $ Parsers ist eine Reihe von Funktionen, bei denen die Funktionen in Form von Pipelines eins voneinander bezeichnet werden. ngmodel Der vom DOM gelesene Wert wird in $ parsers in die Funktion übergeben und vom Parser nacheinander verarbeitet.
4. $ Formatters
Der Wert von $ formatters ist ein Array von Funktionen, die nacheinander in Form einer Pipeline bezeichnet werden, wenn sich der Wert des Datenmodells ändert. Es hat keinen Einfluss auf die $ Parser -Pipeline und wird verwendet, um Werte zu formatieren und zu konvertieren, um sie mit dieser Wertgrenze in den Steuerelementen anzuzeigen.
5. $ Viewchangelisteners
Der Wert von $ ViewChangelisteners ist eine Reihe von Funktionen, die nacheinander in Form einer Pipeline bezeichnet werden, wenn sich der Wert in der Ansicht ändert. Mit $ ViewChangelisteners kann ein ähnliches Verhalten ohne Verwendung von $ Watch erreicht werden. Da der Rückgabewert ignoriert wird, müssen diese Funktionen keine Werte zurückgeben.
6. $ Fehler
Das $ error -Objekt enthält den Validator -Namen, der die Bestätigung und die entsprechenden Fehlerinformationen nicht übergeben hat.
7. $ Pristine
Der Wert von $ Pristine ist boolescher, der uns sagen kann, ob der Benutzer die Kontrolle geändert hat.
8. $ Dirty
Der Wert von $ Dirty ist das Gegenteil von $ Pristine, was uns sagen kann, ob der Benutzer mit der Kontrolle interagiert hat.
9. $ gültig
Der valte Wert $ gibt an, ob die aktuelle Steuerung Fehler vorliegt. Der Wert ist falsch, wenn ein Fehler vorliegt, und der Wert ist wahr, wenn kein Fehler vorliegt.
10. $ Invalid
Der ungültige Wert von $ gibt an, ob mindestens einen Fehler in der aktuellen Steuerung vorhanden ist und sein Wert das Gegenteil von $ gültig ist.
Das obige ist die Zusammenstellung der Anweisungen und Wissensmaterialien über AngularJs. Wir werden sie später weiter hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!