Direktive in AngularJS und die Liste der Direktiven
Wie wir angesprochen haben, ist AngularJS als ein Framework bekannt, das zum Erstellen von Webanwendungen verwendet wird, dh mit einer Reihe vorgefertigter Strukturen ausgestattet ist, die uns helfen, Anwendungen einfach und kohärent zu entwickeln. mehr.Direktiven sind eine der wichtigsten Komponenten von angleJS, das uns hilft, grundlegende HTML-Elemente zu erben, wodurch HTML-Schnittstellenvorlagen wiederverwendbar und einfach zu testen sind.
Mục lục
AngularJS-Direktiven-Konzepte
Direktiven (Direktiven) ist ein Verhalten, das ausgelöst wird, wenn während der AngularJS-Kompilierung auf ein bestimmtes Konstrukt gestoßen wird. Lesen Sie hier mehr über den AngularJS HTML Compiler: https://docs.angularjs.org/guide/compiler
Das folgende Beispiel zeigt zwei Möglichkeiten, die ng-bind-Direktive über ein Attribut oder eine Klasse zu verwenden:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> <span class="ng-bind: name;"></span> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; }); </script> </html>Eingebaute Direktiven sind normalerweise als Attribut von HTML strukturiert (das im Klassen- oder Tag-Stil geschrieben werden kann), Angular erkennt diese speziellen Attribute und wir können uns vorstellen, dass es bei Verwendung dieser Attribute eine Anzeige gibt, daher ist es notwendig, Angulars eigenen zu entsprechen Eigenschaften und sein Prinzip, dass der Anfangsbuchstabe immer das ng-Zeichen ist, gemäß der Beispielstruktur ng-Direktivenname, wobei Direktivenname der Name der Direktive ist, die wir verwenden. Wie in den vorherigen Beispielen, um die Anwendung zu initialisieren, um sie als Anweisungs-Controller zu deklarieren, deklarieren wir ng-controller, deklarieren ein Anweisungsmodell, wir deklarieren ng-model, oder lassen die Datenbindung, wir verwenden ng-bind …
Ein paar Anmerkungen:
- ng-app muss immer definiert werden und muss für Versionen nach Legacy immer ng-app benennen und explizit deklarieren.
- In der HTML-Struktur gibt es immer nur 1 ng-app, es können viele andere ng-Direktiven vorhanden sein.
- Dokumentation der Richtlinienliste: https://docs.angularjs.org/api/ng/directive
Matching-Direktiven (Matching-Direktiven)
Liste beliebter AngularJS-Direktiven
ng-app
Dokumente: https://docs.angularjs.org/api/ng/directive/ngApp
Wenn wir eine Direktive ng-app deklarieren, wird AngularJS verstehen, dass beim Starten einer Angular-Anwendung diese als Root-Element identifiziert und als nächstes die internen Konfigurationsparameter initialisiert werden, die wir als Bootstraps bezeichnen. Darüber hinaus wird ng-app auch verwendet, um verschiedene Module in der Anwendung zu beschreiben. Was das Beispiel betrifft, wir haben bereits viele Demos, also werde ich nicht weiter darüber sprechen.
ng-init
Dokumente: https://docs.angularjs.org/api/ng/directive/ngInit
ng-Modell
Dokumente: https://docs.angularjs.org/api/ng/directive/ngModel
Verwenden Sie die ng-model- Direktive, die verwendet wird, um Daten innerhalb von Formulareingabe-Tags wie input, select, textarea an die Eigenschaften der $scope- Variablen auf der Controller-Ebene zu binden (binden).
ng-model- Direktiven bieten einige der folgenden Funktionen:
- Bietet Validierung von Datentypen für die Anwendung (Nummer, E-Mail, erforderlich)
- Liefert Status für Anwendungsdaten (ungültig, fehlerhaft, Berührung, Fehler)
- Stellen Sie eine CSS-Klasse für das HTML-Element bereit (wird im Post-Validierungsformular besprochen)
- Binden Sie die Daten eines Elements an HTML-Formulare
ng-Wiederholung
Dokumente: https://docs.angularjs.org/api/ng/directive/ngRepeat
Verwenden Sie die Direktive ng-repeat, um HTML-Elemente durchlaufen zu können, wenn Sie ein Listenmodell haben, sei es ein Array oder ein Objekt. Dies sind sehr nützliche und häufig verwendete Direktiven, die Iterations-Tags direkt in HTML unterstützen, was reines Javascript nicht kann.
Beispiel für ng-Wiederholung
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-repeat</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mainController"> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr ng-repeat="item in names"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </tbody> </table> <ul> <li ng-repeat="item in listnotes">{{item.id}} - {{item.title}} - {{item.content}}</li> </ul> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('mainController', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' } ]; $scope.listnotes = [ {'id': 1, 'title': 'Note 1', 'content': 'Content 1'}, {'id': 2, 'title': 'Note 2', 'content': 'Content 2'}, {'id': 3, 'title': 'Note 3', 'content': 'Content 3'} ] }); </script> </html>ng-ausblenden / ng-anzeigen
Verwenden Sie ng-hide, wenn wir das HTML-Element in einer bestimmten Bedingung ausblenden möchten, im Gegensatz zu ng-hide ng-show, das beispielsweise in einer mehrstufigen Crawling-SPA-Anwendungssituation nützlich ist. Das folgende Beispiel ist ein Anwendungsfall von ng-hide für Erstellen einer mehrstufigen Benutzerdatenerfassungsumfrage:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ng-hide/ng-show example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="surveyApp"> <div ng-controller="mainController"> <h1>Survey Form</h1> <form name="surveyForm" ng-submit="handleSubmit()"> <div ng-hide="step1"> <div> <label>What is your name ?</label> <input type="text" ng-model="user.name" required /> </div> <div> <label>How old are you ?</label> <input type="number" placeholder="" ng-model="user.age" required /> </div> <div> <label>Do you get married ?</label> <input type="radio" ng-model="user.married" value="yes" />Yes <input type="radio" ng-model="user.married" value="no" />No </div> <div> <label>What kind of job are you doing ?</label> <select ng-model="user.job"> <option value="developer">Developer</option> <option value="teacher">Teacher</option> <option value="businessconsult">Business Consultant</option> <option value="other">Other</option> </select> </div> <button type="button" data-step="1" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step2"> <div> <label>What is your favorite sports ?</label> <input type="text" ng-model="interest.sports" required /> </div> <div> <label>What is your favorite music ?</label> <input type="text" ng-model="interest.music" required /> </div> <div> <label>What is your favorite movies ?</label> <input type="text" ng-model="interest.movies" required /> </div> <div> <label>What is your favorite books ?</label> <input type="text" ng-model="interest.books" required /> </div> <div> <label>What is your favorite games ?</label> <input type="text" ng-model="interest.games" required /> </div> <button type="button" data-step="2" ng-click="prevstep($event)">Previous step</button> <button type="button" data-step="2" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step3"> <div> <label>Please provide your salary ?</label> <input type="text" ng-model="finances.salary" required /> </div> <div> <label>Please provide your savings ?</label> <input type="text" ng-model="finances.savings" required /> </div> <div> <label>Please provide your investments ?</label> <input type="text" ng-model="finances.investments" required /> </div> <div> <label>Please provide your debt ?</label> <input type="text" ng-model="finances.debt" required /> </div> <button type="button" data-step="3" ng-click="prevstep($event)">Previous step</button> <button>submit form</button> </div> <div ng-hide="step4"> Thanks for your submission Let us show what you provide: <br /> Your name: {{user.name}} <br /> Your age: {{user.age}} <br /> Your job: {{user.job}} <br /> Your favorite sports: {{interest.sports}} <br /> Your favorite music: {{interest.music}} <br /> Your favorite movies: {{interest.movies}} <br /> Your favorite books: {{interest.books}} <br /> Your favorite games: {{interest.games}} <br /> Your salary: {{finances.salary}} <br /> Your savings: {{finances.savings}} <br /> Your investments: {{finances.investments}} <br /> Your debt: {{finances.debt}} <br /> Thanks for contact us ! </div> </form> </body> <script> var surveyApp = angular.module('surveyApp', []); surveyApp.controller('mainController', ($scope) => { $scope.step1 = false; $scope.step2 = true; $scope.step3 = true; $scope.step4 = true; $scope.user = { name: 'sdfsdf', age: '', married: 'no', job: 'developer', } $scope.interest = { sports: '', music: '', movies: '', books: '', games: '', } $scope.finances = { salary: 0, savings: 0, investments: 0, debt: 0, } $scope.prevstep = ($event) => { switch ($event.target.dataset.step) { default: case '2': $scope.step2 = true; $scope.step1 = false; break; case '3': $scope.step3 = true; $scope.step2 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.nextstep = ($event) => { switch ($event.target.dataset.step) { default: case '1': $scope.step1 = true; $scope.step2 = false; break; case '2': $scope.step2 = true; $scope.step3 = false; break; case '3': $scope.step3 = true; $scope.step4 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.handleSubmit = () => { // handle submit to send data to server or send email ... $scope.step3 = true; $scope.step4 = false; console.log($scope.user); console.log($scope.interest); console.log($scope.finances); } }); </script> </html>ng-enthalten
Standardmäßig bietet HTML keine Lösung, um den Inhalt einer HTML-Seite in eine andere einbetten zu können, aber mit AngularJS wird dieses Problem durch die ng-include- Direktive gelöst, wir können eine HTML-Seite direkt in eine HTML-Datei vollständig einbetten eine weitere Datei, die nützlich ist, wenn die HTML-Struktur zu lang ist, wir können sie in kleinere Dateien aufteilen, um den Code für jede Komponente einfach zu pflegen und zu aktualisieren und Fehler im Entwicklungsprozess zu minimieren.
Beispiel für ng-include, Übergeben von Daten vom Controller an die Include-Datei zum Durchlaufen des onload-Attributs, dies ist jedoch keine gute Methode, da es ein Problem mit dem Scoping gibt. In dieser Situation sollten wir eine benutzerdefinierte Direktive verwenden (Direktive selbstdefiniert). wird weiter unten angesprochen.
Weitere Dokumente anzeigen:
Schritt 1: Datei index.html erstellen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-include</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> <h1>ng-include example</h1> <div ng-include="'table.html'" onload="items = items"></div> </div> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.items = [ {name: 'Jani', country: 'Norway'}, {name: 'Hege', country: 'Sweden'}, {name: 'Kai', country: 'Denmark'} ] }); </script> </html>Schritt 2: Datei table.html erstellen
<table> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </table>Ergebnisse nach dem Drucken auf dem Bildschirm
ng-Formular / ng-Einreichung
Dokumente: https://docs.angularjs.org/api/ng/directive/ngForm
Beim Erstellen eines Formulars in reinem HTML zum Senden von Daten an den Server verwenden wir das <form>-Tag und verarbeiten das Submit-Ereignis über die ng-submit- Direktive, aber wir greifen aufgrund dieser Direktive nach der ng-form-Direktive ngForm- Objekt auf der Skriptebene, und dieses Objekt speichert Attribute, die bei der Datenvalidierung verwendet werden, aber wenn wir ein HTML-Tag erstellen, erstellen wir immer noch ein normales <form>-Tag, Sie können mehr Dokumente zu AngularJS lesen. Um das Submit-Ereignis zu behandeln, verwenden wir die Direktive ng-submit . Es gibt einen Punkt, den wir hier bemerken, wenn Sie reines HTML und JS lernen, wird die Website standardmäßig nach dem Absenden neu geladen, aber nicht mit diesem ng-submit, weil, wie gesagt, angleJS verwendet wird, um eine SPA-Anwendung zu erstellen, also nachher Beim Absenden werden die Daten in eine Liste aufgenommen, und wir verwenden eine Ajax-Anforderung, um die Daten an den Server zu senden, ohne die Seite neu zu laden.
Beispiel für ng-form kombiniert mit ng-submit :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ngform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mycontroller"> <form ng-submit="submit()"> <input ng-model="myForm.name" type="text" name="name" placeholder="Name"> <input ng-model="myForm.email" type="email" name="email" placeholder="Email"> <input ng-model="myForm.password" type="text" name="password" placeholder="password"> <input ng-model="myForm.confirmPassword" type="text" name="confirmpassword" placeholder="confirmpassword"> <input type="submit" value="Register"> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.myForm = {}; $scope.myForm.name = "sdfsdf"; $scope.myForm.email = ""; $scope.myForm.password = ""; $scope.myForm.confirmPassword = ""; $scope.submit = function() { console.log($scope.myForm); // send ajax to server or database // in this case, we just save data to localstorage localStorage.setItem('listuser', JSON.stringify($scope.myForm)); } }); </script> </html>Definieren Sie Ihre eigenen Direktiven in angleJS (benutzerdefinierte Direktiven)
Dokumente: https://docs.angularjs.org/guide/directive
Obwohl AngularJS viele Direktiven bereitstellt, die uns helfen, die meisten Anforderungen beim Erstellen einer Anwendung zu erfüllen, können wir eine selbstdefinierte Direktive erstellen, um das Geschäft im Falle von Direktiven zu erfüllen.
Die .AngularJS-Anwendung findet beim Start automatisch übereinstimmende Elemente und führt eine einmalige Operation mit der Methode compile() der benutzerdefinierten Direktive aus und verarbeitet das Element dann mit der Methode link () einer benutzerdefinierten Direktive basierend auf dem Geltungsbereich der Direktive. Bevor wir auf das Beispiel eingehen, müssen wir das allgemeine Konzept des Typs Direktive verstehen.
- Elementdirektiven − Direktiven, die ausgelöst werden, wenn ein passendes Element gefunden wird.
- Attribute – Die Direktive, die ausgelöst wird, wenn ein passendes Attribut gefunden wird.
- Klasse (Klassendirektive) – Eine Direktive, die ausgelöst wird, wenn eine übereinstimmende Klasse gefunden wird.
- Kommentar (Kommentardirektive) − Die Direktive wird aktiviert, wenn ein passender Kommentar gefunden wird.
Diese Direktiven werden verwendet, um den Wert für das Attribut " restrict " anzugeben, wenn Direktiven initialisiert werden: E (Element) A (Attribute) C (Klasse) M (Kommentar). Normalerweise verwenden wir hauptsächlich EA (Element and Attribute Indicator).
Beispiel für die Selbstinitiierung einer grundlegenden benutzerdefinierten Direktive in angleJS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <customdirective></customdirective> <div customdirective></div> <div class="customdirective"></div> </div> </body> <script> var app = angular.module('myApp', []); app.directive('customdirective', function() { return { restrict: 'EAC', template: '<h2>Hello World custom directive</h2>' }; }); app.controller('myController', function($scope) { $scope.name = ""; }); </script> </html>Ergebnisse beim Drucken im Browser
Wenn Sie beispielsweise eine Anwendung mit mehreren Direktiven erstellen, enthält jede Direktive Parameter, die übergeben werden, um die Flexibilität des Programms zu erhöhen. Mit dieser Funktion können wir unsere eigenen, wiederverwendbaren HTML-Strukturen erstellen und die Daten werden dynamisch gemäß den Eingabeparametern aktualisiert.
Schritt 1: Erstellen Sie die Beispielcodedatei index.html wie folgt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <form ng-submit="handlesubmit($event)"> <div surveyform name="person1" submit="directiveSubmit"></div> </form> <form ng-submit="handlesubmit($event)"> <div surveyform name="person2"></div> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope) { $scope.person1 = { fullname: "John", email: "abc@gmail.com", phonenumber: 1234567890 } $scope.person2 = { fullname: "Toanngo92", email: "trienkhaiweb@gmail.com", phonenumber: 2123456789 } $scope.handlesubmit = function ($event) { console.log($event); // todo here } }); app.directive('surveyform', function () { let directive = {}; directive.restrict = 'EAC'; directive.templateUrl = 'surveyForm.html'; directive.scope = { person: '=name', submit: '=' }; directive.compile = function (element, attributes) { // console.log(element); element.css("border", "1px solid #cccccc"); element.css("padding", "10px"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function ($scope, element, attributes) { } return linkFunction; } return directive; }); </script> </html>Schritt 2: Erstellen Sie die Datei surveyForm.html mit der folgenden Struktur
<label>fullname</label> <br /> <input type="text" ng-model="person.fullname" /> <br /> <label>Email</label> <br /> <input type="text" ng-model="person.email" /> <br /> <label>Phone</label> <br /> <input type="number" ng-model="person.phonenumber" /> <br /> <button type="submit">submit</button>Ergebnis beim Drucken in den Browser:
Wir können sehen, dass wir 2 HTML-Formulare ohne Umschreiben wiederverwenden können, 2 Formulare, die dieselbe Struktur ausführen und 2 separate Modelle verwenden.
Hier ist das Ende der grundlegenden Konzepte von Direktiven, wenn die Verwendung der Standarddirektiven im Lernprozess bereits ausreicht, können wir sie für komplexe Projekte, die viele Komponenten wiederverwenden müssen, verwenden.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
