Dieses Tutorial verwendet AngularJS -Version: 1.5.3
AngularJS GitHub: https://github.com/angular/angular.js/
AngularJS Download Adresse: https://angularjs.org/
Zusammenfassung: Richtlinie (Anweisungen) Der Autor ist der Ansicht, dass es sich um eine der sehr leistungsstarken und nützlichen Funktionen von AngularJ handelt. Es entspricht dem Schreiben eines öffentlichen benutzerdefinierten DOM -Elements oder eines Klassenattributs oder eines Attrat -Attributs für uns, und es ist nicht nur so, Sie können auch den Umfang manipulieren, Ereignisse ändern, Stile usw. ändern. Durch diese Richtlinie können wir viele öffentliche Anweisungen zusammenfassen, wie z. B. Paging -Anweisungen, automatische Abschlussanweisungen usw. Dann müssen Sie nur eine einzelne Codezeile auf der HTML -Seite schreiben, um viele leistungsstarke Funktionen zu erzielen. Im Allgemeinen muss die Richtlinie verwendet werden, um die folgenden Szenarien zu haben:
1. Machen Sie Ihr HTML semantischer und Sie müssen den Code und die Logik nicht eingehend untersuchen, um die allgemeine Logik der Seite zu kennen.
2. Eine benutzerdefinierte Komponente und wiederverwenden Sie sie an anderer Stelle wieder.
1. Die Definition der Richtlinie und ihre Verwendungsmethode
Die AngularJS -Direktive -Definition ist grob wie folgt
Angular.module ("App", []). Anweisung ("Directiveame", function () {return {// definieren durch Einstellen von Elementen};})Die Richtlinie kann in Elementnamen, Attributen, Klassen und Kommentaren platziert werden. Das Folgende ist die gleichwertige Art und Weise, Mydir, die Richtlinie, zu zitieren. (Aber viele Richtlinien beschränken sich auf die Verwendung von "Eigenschaften")
<span <span style = "Schriftfamilie: Arial, Helvetica, sans-serif;"> Richtlinie name </span> <span style = "font-family: arial, helvetica, sans-serif; sans-serif; "> Richtlinie-name </span >> </<span style =" font-family: arial, helvetica, sans-serif; sans-serif; "> Richtlinie-name </span >> // Element <!-Richtlinie: <span style =" font-family: arial, helvetica, sans-serif; "> Richtlinie-name </span> <span style =" font-family: arial, helvetica, sans-serif;
Das folgende Beispiel:
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". <Hallo-Welt> </hello-world> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive ('helloWorld', function () {return {prestrict: 'e', Vorlage: '<Div> hi Ich bin lin bingwen ~~~ </div>', ersetzen: true};}); </script> </html>Ergebnis:
Unten finden Sie eine detaillierte Richtlinieversion
var mymodule = angular.module (...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { pre: function Prelink (Scope, Ielement, iattrs, Controller) {...}, post: Funktion postlink (Scope, Ielement, iattrs, Controller) {...}}, Link: Funktion postlink (Scope, Ielement, iattrs) {...}};2. Inhalt der Interpretation des Anweisungsbefehls
Sie können sehen, dass es 8 Inhalte hat
1. Einrücken
(String) Optionale Parameter geben die Form der in der DOM deklarierten Anweisung an. Die Werte sind: E (Element), A (Attribut), C (Klasse), M (Notation) und der Standardwert ist a; Natürlich können zwei auch zusammen verwendet werden, wie EA. Die Darstellung kann entweder ein Element oder ein Attribut sein.
[HTML] Kly Copy View -Code -Fragmente für Code anzeigen, die in meinem Codefragment abgeleitet wurden
E (Element): <Directivedame> </Directivename>
A (Eigenschaft): <Div Directiveame = 'Expression'> </div>
C (Klasse): <div class = 'Directiveame'> </div>
M (Anmerkung): <-Anweisung: Directiveame-Ausdruck->
Im Allgemeinen wird E/A/C häufiger verwendet.
2. Priorität
(Nummer), optionale Parameter, geben Sie die Priorität der Anweisung an. Wenn es mehrere Anweisungen für ein einzelnes DOM gibt, wird zuerst die höhere Priorität ausgeführt.
3.terminal
(Boolean), optionaler Parameter, kann auf true oder false eingestellt werden. Wenn sie auf True gesetzt sind, sind andere Anweisungen mit einer Priorität niedriger als diese Anweisung ungültig und werden nicht aufgerufen (die mit der gleichen Priorität werden weiterhin ausgeführt)
4. Template (Zeichenfolge oder Funktion) Optionale Parameter, die sein können:
(1) Ein Stück HTML -Text
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". <Hallo-Welt> </hello-world> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive ('helloWorld', function () {return {prestrict: 'e', Vorlage: '<div> <h1> hi Ich bin lin bingwen ~~~ </h1> </div>', ersetzen: true};}); </script> </html>(2) Eine Funktion kann zwei Parameter telement und tattrs akzeptieren
Wenn sich Telement auf das Element bezieht, das diese Richtlinie verwendet, und Tattrs ist das Attribut der Instanz, das ein Sammlung (Objekt) ist, das aus allen Attributen des Elements besteht, wie z. B.:
<Hello-World2 title = 'Ich bin die zweite Richtlinie'> </hello-world2>
Der Titel ist das Attribut auf den Tattoos
Mal sehen, was passiert, wenn Vorlage eine Funktion ist
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". <Hallo-Welt> </hello-world> <hello-world2 title = 'Ich bin die zweite Anweisung'> </hello-world2> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive ('helloWorld', function () {return {prestrict: 'e', Vorlage: '<div> <h1> hi Ich bin lin bingwen ~~~ </h1> </div>', ersetzen: true};}); app.directive ("helloWorld2", function () {retrict {crestrict: 'EAC', Vorlage: Funktion (telement, tattrs) {var _html = ''; </script> </html>Ergebnis:
Sie können sehen, dass das Titelfeld im Tag in Hello-World2 ebenfalls in der Richtlinie verwendet wird.
5. Templateurl (String oder Funktion), optionaler Parameter, kann sein
(1) eine Zeichenfolge, die den Pfad der HTML -Datei darstellt
(2) Eine Funktion kann zwei Parameter telement und tattrs akzeptieren (ungefähr die gleichen wie oben)
Hinweis: Während der lokalen Entwicklung müssen Sie einen Server ausführen, andernfalls verursacht es ein CORS -Fehler (Cross Origin Request Script). Da das Laden von HTML -Vorlagen asynchron geladen wird, verlangsamt das Laden einer großen Anzahl von Vorlagen die Website. Hier ist ein Trick, der zuerst die Vorlage zwischenspeichert
Sie können Ihre Indexseite laden und den folgenden Code als Teil Ihrer Seite angeben.
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1> Hallo, ich bin lin bingwen ~~~ </h1> </div> </script>
Das ID -Attribut hier ist auf Templateurl festgelegt.
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". <Hallo-Welt> </hello-world> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive ('helloWorld', function () {return {prestrict: 'e', templateurl: 'hello.html', ersetzen: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> Hallo, ich bin lin bingwen ~~~ </h1> </div> </script> </html>Ausgangsergebnis:
Ein weiterer Weg zum Cache ist:
app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> Hallo, ich bin lin bingwen ~~~ </h1> </div>");}]);Beispiele für die Verwendung sind wie folgt:
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". <Hallo-Welt> </hello-world> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive ('helloWorld', function () {return {prestrict: 'e', templateurl: 'hello.html', ersetzen: true};}); app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> Hallo, ich bin lin bingwen ~~~ </h1> </div>");}]); </script> </html>Ergebnis:
Tatsächlich ist die erste Methode besser, es wird schneller schreiben. Der Autor hat die meiste und erste Methode zum Schreiben, die direkt in SCPRIT enthalten ist.
6. Replace
(Boolescher Wert), der Standardwert ist falsch. Schauen wir uns das folgende Beispiel an (vergleichen Sie die in der Vorlage angegebenen Beispiele).
Wenn ersetzt ist, ist das Tag-Hello-World nicht mehr da, andernfalls existiert es.
7.Scope
(1) Der Standardwert ist falsch. Zeigt die Vererbung des übergeordneten Bereichs an;
(2) wahr. Zeigt an, dass er den übergeordneten Umfang erbt und Ihr eigenes Zielfernrohr erstellt (Kinderbereich);
(3) {}. Zeigt an, einen völlig neuen Isolationsumfang zu erstellen.
7.1 Lassen Sie uns zunächst den Vererbungsmechanismus des Zielfernrohrs verstehen. Verwenden wir den Befehl ng-controller als Beispiel.
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". ng-controller = 'mainController'> Vater: {{name}} <input ng-model = "name"/> <div my-directive> </div> </div> </body> <script type = "text/javascript"> var app = Angular.module ('myapp', []); App.Controller ('MainController', Funktion ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ('myDirective', function () {return {einschränken: 'ea', Scope: false, Vorlage: '<div> Sohn: {{name}} <input ng-model = "name"/> </div>'};}); </script> </html>Als nächstes verwenden wir ein einfaches und klares Beispiel, um die Unterschiede in den Umfangswerten zu veranschaulichen:
Zielfernrohr: Falsch
Scope: Richtig
Umfang:{}
Wenn der Sohn falsch ist, erbt der Sohn den Wert des Vaters und verändert den Wert des Vaters, und der Wert des Sohnes ändert sich auch und umgekehrt. (Die Vererbung ist nicht isoliert)
Wenn der Sohn wahr ist, erbt der Sohn den Wert des Vaters und verändert den Wert des Vaters. Der Wert des Sohnes ändert sich entsprechend, aber wenn sich der Wert des Sohnes ändert, bleibt der Wert des Vaters unverändert. (Vererbung und Isolation)
Wenn {}, wird der Wert des Vaters nicht geerbt, so dass der Wert des Sohnes leer ist. Das Ändern des Werts einer Partei kann den Wert der anderen Partei nicht beeinflussen. (Keine Vererbung und Isolation)
TIPP: Das Isolieren von Umfang ist eine gute Wahl, wenn Sie eine wiederverwendbare Komponente erstellen möchten. Durch das Isolieren von Scopes stellen wir sicher, dass Anweisungen „unabhängig“ sind und leicht in jede HTML -App eingefügt werden können, und dieser Ansatz verhindert, dass das übergeordnete Bereich kontaminiert wird.
7.2 Isolationsbereiche Sie können durch Bindungsrichtlinien auf die Eigenschaften des übergeordneten Bereichs zugreifen.
Die Richtlinie bietet drei Möglichkeiten, um mit Orten außerhalb der Isolation bei der Verwendung von Isolationsumfang zu interagieren. Diese drei sind
@ Binden Sie ein lokales Bereichsattribut an den Eigenschaftswert des aktuellen DOM -Knotens. Das Ergebnis ist immer eine Zeichenfolge, da das DOM -Attribut eine Zeichenfolge ist.
& Bietet eine Möglichkeit, einen Ausdruck im Kontext des übergeordneten Bereichs auszuführen. Wenn der Attrenname nicht angegeben ist, ist der Attributname der gleiche lokale Name.
= Erstellen Sie eine Zwei-Wege-Bindung zwischen dem lokalen Bereichsattribut und dem übergeordneten Bereichsattributnamen durch den Wert des Attributs von Anweisungen.
@ Local Scope Attribut
@ Method Lokale Attribute werden verwendet, um auf Stringwerte zuzugreifen, die durch die externe Umgebung von Anweisungen definiert sind, wobei hauptsächlich externe Zeichenfolgenwerte über das Tag -Attribut gebunden werden, in dem sich die Anweisung befindet. Diese Bindung ist ein Weg, dh die Bindungsänderungen des übergeordneten Bereichs. Die Eigenschaften des Umfangs in der Richtlinie ändern sich synchron, während die Bindungsänderungen im Bereich isoliert werden und der übergeordnete Bereich nicht bekannt ist.
Das folgende Beispiel: Die Richtlinie erklärt, dass der Bereichsbereichstyp nicht isoliert ist, und verwendet das Attribut "Bindungsname" und verwendet das Namensattribut, um das Attribut im übergeordneten Bereich in der Anweisung zu binden. Wenn Sie den Wert des Attributs im übergeordneten Bereich ändern, aktualisiert die Anweisung den Wert synchron. Wenn Sie den Eigenschaftswert des Eigenschaft des Eigenschaftswerts des Eigenschaftswerts des Richtliniens ändern, kann der übergeordnete Umfang den Wert synchron nicht aktualisieren.
JS -Code:
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". ng-controller = "mycontroller"> <div> <div> übergeordnetes Scope: <div> Say: {{Name}} <br> Ändern Sie den Namen des übergeordneten Scope: <input type = "text" value = "" ng-model </div> <div> isoliertes Zielfernrohr (nicht über den übergeordneten Bereich {{name}}): <div isoliert-direkten name = "name"> </div> </div> </div> </body> <script type = "text/javaScript"> var app = Angular.module ('myapp', []); app.controller ("mycontroller", function ($ scope) {$ scope.name = "hello wort";}). Richtlinie ("isoliertDirective", function () {return {scope: {name: "@"}, Vorlage: {{{{name}}}} <br> ändere den Namen des Namens der Namensname: "Buttom". ng-model = "name"> '}; </script> </html>Ergebnisse: Der anfängliche Effekt der Seite
Animationseffekt:
Sie können sehen, dass sich der Inhalt des übergeordneten Bereichs geändert hat und sich der Kinderumfang gleichzeitig geändert hat. Und der Inhalt des Subskops hat sich geändert. Es wirkt sich nicht auf den Inhalt des übergeordneten Umfangs aus!
= Lokales Zielferntriebsattribut
= Erstellen Sie eine Zwei-Wege-Bindung zwischen dem lokalen Bereichsattribut und dem übergeordneten Bereichsattributnamen durch den Wert des Attributs von Anweisungen.
Wenn Sie eine wegen gebundene Eigenschaft wünschen, können Sie die externe Eigenschaften einführen. Unabhängig davon, ob das übergeordnete Umfang oder die Isolierung der Eigenschaften im Bereich, das übergeordnete Bereich und der Isolationsumfang gleichzeitig die Eigenschaftswerte aktualisieren, da es sich um wechselseitige Beziehungen handelt.
Beispielcode:
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". ng-controller="myController"> <div>Parent scope: <div>Say: {{user.name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="userBase.name"/></div> </div> <div>isolated scope: <div isolated-directive user="userBase"></div> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ('myapp', []); app.controller ("mycontroller", function ($ scope) {$ scope.userbase = {name: 'hello', id: 1};}). Richtlinie ("isolatedDirective", function () {return {scope: {user: "="}, Template: Sag: {{{{{user. type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>Wirkung:
Sie können sehen, dass der Inhalt des übergeordneten Bereichs und des Kinderbereichs immer der gleiche ist!
& lokale Bereichsattribute
Die & Methode bietet eine Möglichkeit, einen Ausdruck im Kontext des übergeordneten Bereichs direkt auszuführen. Dieser Ausdruck kann eine Funktion sein.
Wenn Sie beispielsweise eine Anweisung schreiben und der Benutzer auf eine Schaltfläche klickt, möchte die Anweisung den Controller benachrichtigen, kann der Controller nicht wissen, was in der Richtlinie passiert. Vielleicht können Sie dies tun, indem Sie Ereignisse in Angular verwenden, müssen dem Controller jedoch eine Ereignishörmethode hinzufügen.
Der beste Weg ist es, die Richtlinie zu ermöglichen, eine Funktion in einem übergeordneten Bereich zu übergeben. Wenn in der Richtlinie eine Aktion vorhanden ist, die auf den übergeordneten Umfang aktualisiert werden muss, kann ein Code oder eine Funktion im übergeordneten Umfangskontext ausgeführt werden.
Das folgende Beispiel führt die Funktion des übergeordneten Umfangs in der Richtlinie aus.
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". ng-controller = "mycontroller"> <div> übergeordnetes Scope: <div> Say: {{value}} </div> </div> <div> isoliertes Scope: <div isoliert-direkte action = "click ()"> </div> </divular.modula "my myApp"); app.Controller ("myController", function ($ scope) {$ scope.value = "hello wort"; value = "Methode der übergeordneten Bereichsbereichsdefinition in Anweisung" ng-klick = "action ()"/> '}}) </script> </html> ausführenWirkung:
Es gibt viele Anweisungen in Anweisungen, sprechen wir über Transclude, Compline, Link und Controller.
8. TRANSCLUDE
Wenn Sie nicht möchten, dass der Inhalt innerhalb der Richtlinie durch die Vorlage ersetzt wird, können Sie diesen Wert auf true festlegen. Im Allgemeinen muss es mit der NGTRANSCLUDE -Richtlinie verwendet werden. Zum Beispiel: Vorlage: "<div> Hallo, jeder <div ng-transclude> </div> </div>", zu diesem Zeitpunkt wird der Inhalt innerhalb des Anweisungen in die NG-Transclude Div eingebettet. Das heißt, es wird <div> Hallo, jeder <div> Dies ist der Inhalt innerhalb des Befehls </div> </div>. Der Standardwert ist falsch; Mit dieser Konfigurationsoption können wir den im Direktivelement enthaltenen Inhalt extrahieren und dann in eine bestimmte Position in der Anweisungsvorlage platzieren. Wenn Sie Transclude aktivieren, können Sie mit NG-Transclude angeben, wo übersetzte Inhalte platziert werden sollen
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". Link </li> <li> Zweiter Link </li> </ul> </div> </body> <script type = "text/javaScript"> var app = angular.module ('MyApp', []); app.directive('sidebox', function() { return { restrict: 'EA', scope: { title: '@' }, translate: true, template: '<div>/ <div>/ <h2>{{ title }}</h2>/ <span ng-transclude>/ </span>/ </div>/ </div>' }; }); </script> </html>Ergebnis:
Wenn transklude: falsch,
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.
9.Controller
Es kann eine Zeichenfolge oder eine Funktion sein.
Wenn es sich um eine Zeichenfolge handelt, verwenden Sie die Zeichenfolge als Name des Controllers, um den Konstruktor des in der Anwendung registrierten Controllers zu ermitteln.
Angular.module ('MyApp', []) .Directive ('mydirective', function () {Einschränkung: 'a', // Controller: 'Somecontroller'}) // Andere Orte in der Anwendung können dieselbe Datei oder eine andere Datei sein, die in Index.html Angular.modul ($ myapp ', $ (' MyApp ', $), $ ($), $ ($). $ attrs, $ transclude) {// Die Controller -Logik wird hier platziert}); Es kann auch als anonyme Funktionen direkt in den Anweisungen definiert werden, und wir können jeden Dienst hier injizieren ($ log, $ timeout usw.). $ transclude) {// Die Controller -Logik wird hier platziert}});Es gibt auch einige spezielle Dienste (Parameter), die injiziert werden können
(1) $ Scope, Umfang im Zusammenhang mit Richtlinienelementen
(2) $ Element, das Element, das der aktuellen Anweisung entspricht
(3) $ attrs, ein Objekt, das aus Attributen des aktuellen Elements besteht
(4) $ transclude, eingebettete Verbindungsfunktion, tatsächlich ausgeführte Funktionen, die zum Klonen von Elementen und dem Betrieb von DOM verwendet wurden
Hinweis: Sofern es nicht verwendet wird, um ein wiederverwendbares Verhalten zu definieren, wird es hier im Allgemeinen nicht empfohlen.
Die Controller- und Verbindungsfunktionen der Anweisung (später zu diskutieren) können austauschend. Der Unterschied besteht darin, dass der Controller hauptsächlich verwendet wird, um ein Verhalten zu liefern, das zwischen den Anweisungen wiederverwendet werden kann. Die Verbindungsverbindungsfunktion kann jedoch nur das Verhalten in den aktuellen internen Anweisungen definieren und nicht zwischen Anweisungen wiederverwendet werden.
<! DocType html> <html lang = "zh" ng-App = "myapp"> <head> <meta charset = "utf-8"> <titels> Einführung in AngularJs </title> <script type = "text/javaScript" src = ". Bingwen ~~~ </Hallo> </body> <script type = "text/javaScript"> var app = angular.module ('myapp', []); app.directive ('hello', function () {retrict {prestrict: 'ea', transclude: true, // Beachten Sie, dass es auf true Controller: Funktion ($ scope, $ element, $ attrs, $ transklude, $ log) {// Hier können Sie den Service injizieren $ transclude (klone) {var a = anghular inject ('<'; $ attr.mycolor); </script> </html>Ausgangsergebnis:
Und geben alle unter der Konsole aus
Schauen wir uns $ transclude () an; Hier kann zwei Parameter dauern, das erste ist $ Scope, Umfang und die zweite ist eine Rückruffunktion mit dem Parameterklon. Und dieser Klon ist eigentlich der eingebettete Inhalt (von JQuery verpackt), und Sie können viele DOM -Operationen darauf ausführen.
Sein einfachster Weg ist
<Script> angular.module ('MyApp', []). Richtlinie ('mySite', function () {retrict {prestrict: 'ea', transclude: true, controller: function ($ scope, $ element, $ attrs, $ transclude, $ log) {var a = $ transclude (); // $ transclude () is $ indontted $ $ Element (a); </script>Hinweis: Mit $ transclude generiert ein neues Zielfernrohr.
Wenn wir $ transclude () einfach und praktisch einfach und praktisch verwenden, ist das Standardbereich der von $ transclude generierte Umfang
Wenn wir $ transclude ($ scope, function (klone) {}) verwenden
Dann kommt die Frage wieder. Was ist, wenn wir den übergeordneten Umfang verwenden möchten?
$ scope. $ parent kann verwendet werden
In ähnlicher Weise können Sie auch $ scope. $ Parent.new () verwenden, wenn Sie einen neuen Umfang wünschen.
10.Controlleras
Diese Option wird verwendet, um den Alias Ihres Controllers festzulegen
In der Vergangenheit haben wir diese Methode oft verwendet, um Code zu schreiben:
angular.module("app",[]) .controller("demoController",["$scope",function($scope){ $scope.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController"> {{title}} </div>Später hat AngularJS1.2 uns neuen Syntaxzucker gebracht, damit wir es so schreiben können
Angular.module ("App", []) .Controller ("Democontroller", [function () {this.title = "Angualr";}]) <div ng-App = "App" ng-controller = "Democontroller als Demo"> {{{Demo.title}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} </divolerWir können dies auch in den Befehl schreiben
<Script> Angular.module ('MyApp', []). Richtlinie ('mySite', function () {retrict {prestrict: 'ea', transclude: true, controller: 'somecontroller', Controlleras: 'MainController' //. </script>11.Require (String oder Array)
Eine Zeichenfolge repräsentiert den Namen einer anderen Anweisung, die als viertes Parameter der Verbindungsfunktion verwendet wird. Wir können ein Beispiel geben, um die spezifische Verwendung zu veranschaulichen. Angenommen, wir müssen jetzt zwei Anweisungen schreiben. In der Link -Link -Funktion gibt es viele überlappende Methoden (die Linkfunktion wird später diskutiert). Zu diesem Zeitpunkt können wir diese wiederholten Methoden in den Controller der dritten Anweisung schreiben (der Controller wird auch erwähnt, um das Wiederverwendungsverhalten zwischen den Anweisungen bereitzustellen). Erfordern Sie dann in diesen beiden Anweisungen den Anweisungen mit dem Controller -Feld (der dritten Anweisung).
Schließlich können Sie diese überlappenden Methoden über den vierten Parameter der Link -Link -Funktion verweisen.
<! docType html> <html ng-app = "myapp"> <kopf> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min <inner-directive2> </inner-directive2> </äußere Directive> <script> var app = angular.module ('MyApp', []); app.directive ('outerDirective', function () {return {scope: {}, begrenzt: 'ae', controller: function ($ scope) {this.say = function (somedirective) {console.log ('got:' + seltirective.message);};}}}};};}); app.directive ('innerDirective', function () {return {scope: {}, begrenzt: 'ae', verlangt: '^outerDirective', link: function (scope, elem, attrs, ControllerInstance) {scope.message = "hi, leifleg". app.directive ('innerDirective2', function () {return {scope: {}, begrenzt: 'ae', verlangt: '^outerDirective', link: function (scope, elem, attrs, controllerinstance) {scope.message = "hi, shushu"; </script> </body> </html>Die Anweisungen innerDirektiv und Richtlinie Innerdirective2 In den obigen Beispielen wiederverwenden Methoden, die im Controller der Richtlinie OuterDirective definiert sind.
Es wird ferner erklärt, dass der Controller in der Anweisung verwendet wird, um zwischen verschiedenen Anweisungen zu kommunizieren.
Darüber hinaus können wir dem Parameterwert des Anforderungen ein Präfix hinzufügen, der das Verhalten des Suchcontrollers ändert:
(1) Ohne Präfix wird die Anweisung in dem von selbst bereitgestellten Controller durchsucht. Wenn kein Controller gefunden wird, wird ein Fehler geworfen.
(2)? Wenn der erforderliche Controller in der aktuellen Anweisung nicht gefunden wird, wird Null an den vierten Parameter der Link -Verbindungsfunktion übergeben
(3)^Wenn der erforderliche Controller in der aktuellen Anweisung nicht gefunden wird, wird der Controller des übergeordneten Elements gefunden
(4)?^ Kombination
12. Anguars Befehlskompilierungsprozess
Laden Sie zuerst die AngularJS-Bibliothek und finden Sie die NG-App-Anweisung, um die Grenzen der Anwendung zu finden.
Rufen Sie $ Compile Service for Compilation gemäß dem von NG-App definierten Umfang an. AngularJS durchquert das gesamte HTML -Dokument und verarbeitet die auf der Seite gemäß den Anweisungen gemäß den Anweisungen deklarierten Anweisungen. Das DOM wird in den Anweisungen gemäß den Konfigurationsparametern (Vorlage, Platz, Platz, Transklude usw.) konvertiert und dann mit der Ausführung der Kompilierung jeder Anweisung (wenn die Kompilierfunktion auf der Anweisung definiert ist), um die Vorlage selbst zu konvertieren.
Hinweis: Die Kompilierungsfunktion hier ist in unserer Anweisung konfiguriert, die sich von dem oben genannten $ Compile -Dienst unterscheidet. Nachdem jede Kompilierungsfunktion ausgeführt wurde, wird eine Linkfunktion zurückgegeben und alle Linkfunktionen werden zu einer großen Verbindungsfunktion kombiniert.
Anschließend wird diese große Verbindungsfunktion ausgeführt, hauptsächlich für die Datenbindung, wobei die Daten im Bereich dynamisch geändert werden, indem ein Hörer auf dem DOM registriert wird, oder $ Watchs zum Anhören auf Variablen im Bereich zum Ändern der DOM, wodurch die Bindung von Zwei-Wege usw. nicht konfiguriert ist. Was sie tut, ist ungefähr die gleiche wie die große Verbindungsfunktion, die von allen Verbindungsfunktionen synthetisiert wurde, nachdem das Kompilieren oben zurückgekehrt ist.
Daher: In der Richtlinie schließen sich Kompilier- und Verbindungsoptionen 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.
13. Kompilierfunktion
Funktion Compile (Telement, Tattrs, Transclude) {...}
Kompilierungsfunktionen werden verwendet, um Situationen zu behandeln, in denen die Vorlagen -DOM geändert werden muss. Da für die meisten Anweisungen keine Vorlagenänderung erforderlich sind, wird diese Funktion nicht häufig verwendet. Beispiele, die verwendet werden müssen, umfassen ngreprepeat, bei dem die Vorlage geändert werden muss, und NgView erfordert, dass der Inhalt asynchron geladen wird. Die kompilierte Funktion akzeptiert die folgenden Parameter.
Telement - Vorlagenelement - Das Element, in dem sich die Richtlinie befindet. Es ist sicher, dieses Element und seine Unterelemente zu verformen.
TATTRS - Template -Attribute - Alle von der Richtlinie dieses Elements deklarierten Attribute werden in der kompilierten Funktion freigegeben.
Transclude - Eine eingebettete Verbindungsfunktion (Scope, Clonelinkingfn).
Hinweis: Führen Sie in der kompilierten Funktion keine anderen Operationen als DOM -Deformation durch. Noch wichtiger ist, dass die Registrierung von DOM -Hörereignissen in der verknüpften Funktion und nicht in der kompilierten Funktion erfolgen sollte.
Eine kompilierte Funktion kann ein Objekt oder eine Funktion zurückgeben.
Rückgabefunktion - äquivalent zu einer Linkfunktion, die mit dem Link -Attribut des Konfigurationsobjekts registriert ist, wenn die kompilierte Funktion nicht vorhanden ist.
Rückgabeobjekt - Gibt ein Objekt zurück, das eine Funktion über das Vor- oder Post -Attribut registriert hat. Siehe die Erläuterung der folgenden Vorverknüpfungs- und Post-Liking-Funktionen.
14. Verbindungsfunktion
Funktionslink (Scope, Ielement, Iattrs, Controller) {...}
Die Linkfunktion ist für die Registrierung von DOM -Ereignissen und die Aktualisierung des DOM verantwortlich. Es wird ausgeführt, nachdem die Vorlage geklont wurde, und dort wird auch der größte Teil des Anweisungslogikcodes geschrieben.
Umfang - Der Umfang, den Richtlinien zuhören müssen.
Ielement - Instanzelement - Das Element, in dem sich die Richtlinie befindet. In der Postlink -Funktion ist es sicher, unter Kinderelementen von Elementen zu arbeiten, da sie dann alle verknüpft sind.
IATTRS - Instanzattribute - Instanzattribute, eine standardisierte Liste von Attributen, die im aktuellen Element deklariert sind und unter allen verknüpften Funktionen freigegeben werden.
Controller - Controller -Instanz, dh Controller in Direct2, angefordert von der aktuellen Anweisung. Zum Beispiel: Controller: function () {this.addStrength = function () {}} In der Direct2 -Anweisung können Sie in der Linkfunktion der aktuellen Anweisung über Controller.addStrength aufrufen.
Die Vorverbindungsfunktion wird ausgeführt, bevor die untergeordneten Elemente verknüpft sind. Es kann nicht verwendet werden, um DOM zu verformen, falls die Verbindungsfunktion nicht das richtige Element finden kann.
Nach dem Verknüpfungsfunktion alle Elemente werden nach Verknüpfung ausgeführt.
veranschaulichen:
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 im Allgemeinen, 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 Übersetzungsfunktion 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. 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.
Dieser Artikel wird reproduziert http://blog.csdn.net/evankaka
Das obige ist der gesamte Inhalt der Verwendung von AngularJs: Richtlinienunterricht, ich hoffe, es wird für das Lernen aller hilfreich sein.