Schlüsselpunkte für das Lernen
• Warum Befehle verwenden?
• Erstellen Sie benutzerdefinierte Richtlinien
• Arbeiten Sie mit JQLite
1.. Warum benutzerdefinierte Befehle verwenden
NG hat viele benutzerdefinierte Richtlinien integriert, erfüllt jedoch manchmal nicht Ihren Anforderungen, wodurch wir benutzerdefinierte Eigenschaften erstellen müssen.
2. benutzerdefinierte Befehle
Als nächstes machen wir einen kleinen Fall. Wenn die Maus klickt, um den Preis zu erhöhen, erhöht sich die Listenartikel automatisch. Natürlich wird die Liste automatisch über Anweisungen hinzugefügt. Es ist ein leerer Div
<! DocType> <!-Verwenden Sie Modul-> <html ng-app = "exampleApp"> <kopf> <titels> Angluar-Test </title> <meta charset = "utf-8"/> <link rel = "styleSheet" type = "text/css" href = "css/bootstrap.min type = "text/css" href = "css/bootstrap-themen.min Erhöhen Sie </button> </div> <div> <!-Produktdaten in einer nicht ordnungsgemäßen Liste anzeigen-> <!-List-Property = "Preis | Währung" Listelement-Einheiten lokalisiert-> <div Unordnungslist = "Produkte" List-Property = "Preis | Währung"> </div> </div> </dlv> <script | src = "js/angular.min.js"> </script> <script type = "text/javaScript"> angular.module ("expleApp", []) .directive ("unorderlist", function () {// Scope Scope // Element anwenden Sie das Element der Anweisung an. Attrs ['Unorderlist'] den Wert des nicht OrderList -Attributs erhalten, hier ist der Wert des Datenmodells Element.Append (UL); <li> Tagelement var li = angular.element ("<li>"); (NewValue, OldValue) {// den Wert von Li li.Text (NewValue);})}) (i); Ablauf: 10}, {Name: "Bananas", Kategorie: "Frucht", Preis: 2.42, Ablauf: 7}, {Name: "Birnen", Kategorie: "Frucht", Preis: 2.02, Ablauf: 6}; $ scope.Products [i] .Price ++;Analyse:
Schritt 1: Erstellen Sie einen Controller, fügen Sie Datenmodellprodukte und IncrementPrices () -Methoden hinzu
Schritt 2: Passen Sie das Unordnungslisten -Tag an. Die Funktion dieses Tags lautet: Zeigen Sie seinen Wert in einer ungeordneten Liste über das Scoped -Datenmodell an.
Teil 3: Und wenn die Schaltfläche "Markup" klickt, erhöht sich die Werte der nicht ordnungsgemäßen Liste
3. Arbeiten Sie mit JQLite
NG hat eingebaute JQLite, eine kleinere Version von JQuery
<! DocType> <!-Verwenden Sie Modul-> <html ng-app = "exampleApp"> <kopf> <titels> Angluar-Test </title> <meta charset = "utf-8"/> <link rel = "styleSheet" type = "text/css" href = "css/bootstrap.min type = "text/css" href = "css/bootstrap-theMe.min <li>Oranges</li> </ol> </dlv><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">angular.module("exampleApp", []) .directive("domeDirective", function () { return function (scope, element, attrs) { // Find all Das LIS unter dem Element, hier ist das Element der Anrufer <ol> var items = element.find ("li"); (items.eq (i) .Text () == "Orangen") {items.eq (i) .css ("Farbe", "rot"); items.css ("color"));Analyse:
Schritt 1: Passen Sie den Controller an und definieren Sie die Datenmodellnamen
Schritt 2: Passen Sie den Befehl an, die Funktion besteht darin, alle LIS unter den vom Befehl verwendeten Elementen herauszufinden und unterschiedlichen Farben der Schrift unterschiedliche Werte zuzuweisen.
Schritt 3: Rufen Sie an und verwenden Sie Anweisungen in der Ansicht
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.