Προσαρμοσμένη οδηγία AngularJS: Πρότυπα, Πεδίο εφαρμογής και συμπερίληψη
Τζέιμς Χάρτμαν
⚡ Έξυπνη Σύνοψη
Οι προσαρμοσμένες οδηγίες στο AngularJS επεκτείνουν την HTML με επαναχρησιμοποιήσιμη συμπεριφορά που ορίζετε οι ίδιοι. Ένα directive factory επιστρέφει ένα αντικείμενο ορισμού και το AngularJS προσαρτά αυτήν τη συμπεριφορά όπου εμφανίζεται το αντίστοιχο στοιχείο, χαρακτηριστικό, κλάση ή σχόλιο στο markup.
Τι είναι μια Προσαρμοσμένη Οδηγία στο AngularJS;
A Προσαρμοσμένη οδηγία στο AngularJS είναι μια οδηγία οριζόμενη από τον χρήστη που επεκτείνει την HTML με συμπεριφορά που γράφετε εσείς οι ίδιοι. Είναι καταχωρημένη σε ένα ενότητα χρησιμοποιώντας τη συνάρτηση «κατευθυντική» και το AngularJS την προσαρτά όπου εμφανίζεται το αντίστοιχο στοιχείο ή χαρακτηριστικό στη σελίδα. Παρόλο που το AngularJS έχει πολλά ισχυρά ενσωματωμένες οδηγίες αμέσως μόλις το βγάλετε από τη συσκευασία, όπως π.χ. ng-επανάληψη, μερικές φορές απαιτούνται προσαρμοσμένες οδηγίες.
⚠️ διόρθωση: Το αρχικό έλεγε ότι μια προσαρμοσμένη οδηγία «αντικαθιστά το στοιχείο για το οποίο χρησιμοποιείται». Από προεπιλογή, δεν κάνει τα εξής: template εισάγεται μέσα το αντίστοιχο στοιχείο. Ανάγκες αντικατάστασης replace: true, έχει καταργηθεί από την έκδοση 1.3 του AngularJS.
⚠️ Ειδοποίηση υποστήριξης: Το AngularJS έφτασε τέλος ζωής στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις κώδικα ή διορθώσεις ασφαλείας. Όλα τα παρακάτω παραμένουν ακριβή για τη διατήρηση του υπάρχοντος κώδικα AngularJS 1.x. Στο σύγχρονο Angular τα ισοδύναμα είναι οι οδηγίες components και attribute.
Ο λόγος για την επιλογή μιας προσαρμοσμένης οδηγίας είναι η επανάληψη. Όταν η ίδια σήμανση ή καλωδίωση DOM εμφανίζεται σε πολλές οθόνες, μια οδηγία τη μετατρέπει σε μία επώνυμη ετικέτα.
Πώς να δημιουργήσετε μια προσαρμοσμένη οδηγία;
Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να δημιουργήσουμε μια προσαρμοσμένη οδηγία AngularJS.
Η προσαρμοσμένη οδηγία στην περίπτωσή μας απλώς θα εισάγει μια ετικέτα div η οποία θα έχει το κείμενο "Angular JS Tutorial" στη σελίδα μας όταν καλείται η οδηγία.
Το σχολιασμένο στιγμιότυπο οθόνης παρακάτω αριθμεί τα τέσσερα μέρη της καταχώρισης που εξηγούνται μετά από αυτό.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: '<div>Angular JS Tutorial</div>' } }); </script> </body> </html>
⚠️ Προειδοποίηση — ελαττώματα που διατηρούνται σε αυτήν την καταχώριση: Ο κώδικας αναπαράγεται ακριβώς όπως δημοσιεύτηκε. Τρία ελαττώματα επαναλαμβάνονται σε κάθε καταχώριση εδώ: chrset="UTF 8" θα πρέπει να είναι charset="UTF-8"; angular.js και angular.min.js και τα δύο φορτώνονται, επομένως το AngularJS φορτώνει δύο φορές· και angular-route.js φορτώνει πριν από το αρχείο από το οποίο εξαρτάται.
Code εξήγηση
- Πρώτα δημιουργούμε ένα ενότητα για την εφαρμογή AngularJS μας. Αυτό απαιτείται για τη δημιουργία μιας προσαρμοσμένης οδηγίας, επειδή η οδηγία θα δημιουργηθεί χρησιμοποιώντας αυτήν την ενότητα.
- Δημιουργούμε τώρα μια προσαρμοσμένη οδηγία που ονομάζεται "ng".Guru"και ορίζοντας μια εργοστασιακή συνάρτηση η οποία θα περιέχει τον προσαρμοσμένο κώδικα για την οδηγία μας.
- Χρησιμοποιούμε την παράμετρο template, η οποία είναι μια παράμετρος που ορίζεται από το AngularJS για προσαρμοσμένες οδηγίες. Σε αυτήν την περίπτωση, ορίζουμε ότι κάθε φορά που χρησιμοποιείται αυτή η οδηγία, απλώς χρησιμοποιήστε την τιμή του template και εισάγετέ την στον κώδικα κλήσης.
- Εδώ τώρα χρησιμοποιούμε την προσαρμοσμένη οδηγία "ng-guru". Όταν το κάνουμε αυτό, η τιμή που ορίσαμε για το πρότυπό μας,
<div>Angular JS Tutorial</div>, θα εγχυθεί τώρα εδώ.
Ονομασία και Κανονικοποίηση Οδηγιών
Η αναντιστοιχία ονομάτων μεταξύ των JavaΤο script και η HTML μπερδεύουν τους περισσότερους αρχάριους. AngularJS ομαλοποιεί κάθε όνομα στοιχείου και χαρακτηριστικού πριν το ταιριάξει: αφαιρεί οποιοδήποτε x- or data- πρόθεμα, στη συνέχεια μετατρέπει ένα όνομα που οριοθετείται από -, : or _ στο camelCase. Γι' αυτό ngGuru σπίρτα ng-guru, και γιατί data-ng-guru λειτουργεί επίσης. Η μορφή camelCase είναι το πραγματικό όνομα. η μορφή kebab-case είναι απλώς ο τρόπος με τον οποίο γράφεται σε HTML.
⚠️ διόρθωση: Το αρχικό κείμενο έλεγε ότι ένα προσαρμοσμένο όνομα οδηγίας «θα έπρεπε να ξεκινά με τα γράμματα 'ng'». επίσημη τεκμηρίωση AngularJS συμβουλεύει το αντίθετο: ποτέ μην βάζετε πριν από τις δικές σας οδηγίες το ng, ή ενδέχεται να συγκρουστούν με ένα μελλοντικό ενσωματωμένο πρόθεμα. Χρησιμοποιήστε το δικό σας πρόθεμα, όπως g99Guru γραμμένο ως g99-guru.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
Το αποτέλεσμα δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία ng-guru, η οποία έχει ορίσει το πρότυπο για την εμφάνιση ενός προσαρμοσμένου κειμένου, εμφανίζεται στο πρόγραμμα περιήγησης. Το επόμενο βήμα είναι να τοποθετήσετε κάτι που αξίζει να επαναχρησιμοποιηθεί μέσα σε αυτό το πρότυπο.
Πώς να δημιουργήσετε επαναχρησιμοποιήσιμες οδηγίες
Έχουμε ήδη δει τη δύναμη των προσαρμοσμένων οδηγιών, αλλά μπορούμε να το μεταφέρουμε στο επόμενο επίπεδο δημιουργώντας τις δικές μας επαναχρησιμοποιήσιμες οδηγίες.
Ας υποθέσουμε, για παράδειγμα, ότι θέλαμε να εισάγουμε κώδικα που θα εμφανίζει πάντα τις παρακάτω ετικέτες HTML σε πολλές οθόνες, κάτι που ουσιαστικά είναι απλώς μια εισαγωγή για το "Όνομα" και την "ηλικία" του χρήστη.
Για να επαναχρησιμοποιήσουμε αυτό το τμήμα σε πολλές οθόνες χωρίς να το κωδικοποιούμε κάθε φορά, δημιουργούμε ένα κύριο στοιχείο ελέγχου ή οδηγία στο AngularJS για να διατηρήσουμε αυτά τα δύο στοιχεία ελέγχου.
Έτσι, τώρα, αντί να επαναλαμβάνουμε αυτήν την επισήμανση σε κάθε οθόνη, την ενσωματώνουμε σε μια οδηγία και καλούμε την οδηγία. Το παρακάτω στιγμιότυπο οθόνης σηματοδοτεί τη μόνη γραμμή που αλλάζει.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Code εξήγηση
- Στο απόσπασμα κώδικα για μια προσαρμοσμένη οδηγία, αυτό που αλλάζει είναι μόνο η τιμή που δίνεται στην παράμετρο προτύπου. Αντί για μια απλή ετικέτα ή μια γραμμή κειμένου, εισάγουμε ολόκληρο το τμήμα δύο στοιχείων ελέγχου εισόδου για τα "Όνομα" και "ηλικία" που πρέπει να εμφανίζονται στη σελίδα μας.
💡 Συμβουλή: Ένα πρότυπο αυτού του μήκους ανήκει σε ξεχωριστό αρχείο. Swap (Ανταλλαγή). template για templateUrl: 'name-age.html'.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
Από το παραπάνω αποτέλεσμα, μπορούμε να δούμε ότι το απόσπασμα κώδικα από το πρότυπο της προσαρμοσμένης οδηγίας προστίθεται στη σελίδα. Το πρότυπο εξακολουθεί να είναι στατικό, επομένως το επόμενο βήμα είναι να του τροφοδοτήσουμε με δεδομένα.
Οδηγίες και Πεδία Εφαρμογής AngularJS
The έκταση ορίζεται ως η κόλλα που συνδέει τον ελεγκτή με την προβολή διαχειριζόμενος τα δεδομένα μεταξύ της προβολής και του ελεγκτή.
Κατά τη δημιουργία προσαρμοσμένων οδηγιών AngularJS, αυτές από προεπιλογή θα έχουν πρόσβαση στο αντικείμενο scope στον γονικό ελεγκτή. Πρόκειται για το ίδιο αντικείμενο scope, όχι για αντίγραφο.
Με αυτόν τον τρόπο, γίνεται εύκολο για την προσαρμοσμένη οδηγία να κάνει χρήση των δεδομένων που διαβιβάζονται στον κύριο ελεγκτή.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το πεδίο εφαρμογής ενός γονικού ελεγκτή στην προσαρμοσμένη οδηγία μας. Το παρακάτω στιγμιότυπο οθόνης αριθμεί τα τέσσερα βήματα.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorialName = "Angular JS"; }); app.directive('ngGuru',function(){ return { template: '<div>{{tutorialName}}</div>' } }); </script> </body> </html>
Code εξήγηση
- Αρχικά δημιουργούμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό, ορίζουμε μια μεταβλητή που ονομάζεται tutorialName και την συνδέουμε στο αντικείμενο scope σε μία εντολή:
$scope.tutorialName = "Angular JS". - Στην προσαρμοσμένη οδηγία μας, μπορούμε να ονομάσουμε τη μεταβλητή "tutorialName" χρησιμοποιώντας μια έκφραση. Αυτή η μεταβλητή θα είναι προσβάσιμη επειδή ορίζεται στον ελεγκτή "DemoController", ο οποίος θα γίνει ο μητρικός για αυτήν την οδηγία.
- Αναφέρουμε τον ελεγκτή σε μια ετικέτα div, η οποία θα λειτουργεί ως γονική ετικέτα div. Σημειώστε ότι αυτό πρέπει να γίνει πρώτα προκειμένου η προσαρμοσμένη μας οδηγία να έχει πρόσβαση στη μεταβλητή tutorialName.
- Τελικά απλώς επισυνάπτουμε την προσαρμοσμένη οδηγία "ng-guru" στην ετικέτα div μας.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
Το παραπάνω αποτέλεσμα δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία μας "ng-guru" χρησιμοποιεί τη μεταβλητή πεδίου εφαρμογής tutorialName στον γονικό ελεγκτή. Η κοινή χρήση του γονικού πεδίου εφαρμογής είναι βολική, αλλά δεν είναι πάντα αυτό που θέλετε.
Χρήση ελεγκτών με οδηγίες
Το AngularJS δίνει τη δυνατότητα να πρόσβαση στη μεταβλητή μέλους του ελεγκτή απευθείας από προσαρμοσμένες οδηγίες χωρίς την ανάγκη του αντικειμένου πεδίου.
Αυτό καθίσταται απαραίτητο κατά καιρούς, επειδή μια εφαρμογή μπορεί να έχει πολλά αντικείμενα πεδίου εφαρμογής που ανήκουν σε πολλούς ελεγκτές, επομένως υπάρχει μεγάλη πιθανότητα πρόσβασης στο αντικείμενο πεδίου εφαρμογής λάθος ελεγκτή κατά λάθος.
Σε ένα τέτοιο σενάριο, υπάρχει ένας τρόπος να πούμε συγκεκριμένα "Θέλω να έχω πρόσβαση σε αυτόν τον ελεγκτή" από την οδηγία μου.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό. Το στιγμιότυπο οθόνης αριθμεί τα τέσσερα βήματα.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru99=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function() { this.tutorialName = "Angular"; }); app.directive('ngGuru99',function(){ return { controller: 'DemoController', controllerAs: 'ctrl', template: '{{ctrl.tutorialName}}' }; }); </script> </body> </html>
Code εξήγηση
- Αρχικά δημιουργούμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό θα ορίσουμε μια μεταβλητή που ονομάζεται "tutorialName" και αυτή τη φορά, αντί να την συνδέσουμε στο αντικείμενο scope, θα την συνδέσουμε απευθείας στον ελεγκτή.
- Στην προσαρμοσμένη οδηγία μας, αναφέρουμε συγκεκριμένα ότι θέλουμε να χρησιμοποιήσουμε τον ελεγκτή "DemoController" χρησιμοποιώντας τη λέξη-κλειδί παραμέτρου ελεγκτή.
- Δημιουργούμε μια αναφορά στον ελεγκτή χρησιμοποιώντας την παράμετρο "controllerAs". Αυτή ορίζεται από το AngularJS και είναι ο τρόπος αναφοράς στον ελεγκτή με ένα ψευδώνυμο.
- Τέλος, στο πρότυπό μας, χρησιμοποιούμε την αναφορά που δημιουργήθηκε στο βήμα 3 και τη μεταβλητή-μέλος που συνδέθηκε απευθείας στον ελεγκτή στο βήμα 1.
Σημείωση: Είναι δυνατή η πρόσβαση σε πολλαπλούς ελεγκτές σε μια οδηγία καθορίζοντας αντίστοιχα μπλοκ του ελεγκτή, των controllerAs και των εντολών template. Για να φτάσετε σε ένα μητρική εταιρεία αντίθετα, χρησιμοποιήστε τον ελεγκτή της οδηγίας require.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
Η έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία έχει πρόσβαση στο DemoController και στη μεταβλητή-μέλος tutorialName που είναι συνδεδεμένη με αυτήν και εμφανίζει το κείμενο "Angular". Και οι δύο προσεγγίσεις εξακολουθούν να διαβάζονται από ένα κοινόχρηστο πεδίο εφαρμογής, κάτι που αποτρέπει ένα απομονωμένο πεδίο εφαρμογής.
Πώς διαφέρουν οι συνδέσεις @, =, & και < σε ένα απομονωμένο πεδίο εφαρμογής
Μια οδηγία που μοιράζεται το γονικό της πεδίο εφαρμογής μπορεί να χρησιμοποιηθεί μόνο μία φορά ανά ελεγκτή, επειδή δύο αντίγραφα θα μάχονταν για τις ίδιες μεταβλητές. A scope το αντικείμενο δημιουργεί ένα απομόνωση πεδίου εφαρμογής: η οδηγία δεν βλέπει τίποτα εξωτερικό εκτός από τις ιδιότητες που αναφέρετε. Κάθε καταχώρηση χρησιμοποιεί ένα σύμβολο προθέματος που δηλώνει τον τρόπο με τον οποίο μετακινείται η τιμή της.
| Σύμβολο | Tοποθεσία | Αξία που ελήφθη | Χρησιμοποιήστε το για |
|---|---|---|---|
| @ | Μονόδρομη είσοδος | Το χαρακτηριστικό ως παρεμβαλλόμενη συμβολοσειρά | Ετικέτες, τίτλοι, οποιοδήποτε απλό κείμενο |
| = | Αμφίδρομη | Το ίδιο το ζωντανό αντικείμενο ή η ίδια η τιμή | Μοντέλα στα οποία επιστρέφει η οδηγία |
| & | Εξωτερική κλήση | Μια συνάρτηση που αξιολογεί μια έκφραση στο εξωτερικό πεδίο εφαρμογής | Επανακλήσεις όπως κατά το κλείσιμο ή κατά την αποθήκευση |
| < | Μονόδρομη είσοδος | Η εκτιμώμενη τιμή, δεν γράφεται ποτέ προς τα πάνω | Δεδομένα μόνο για ανάγνωση, προστέθηκαν στο AngularJS 1.5 |
💡 Συμβουλή: Φτάνω για < πριν =Η μονόδρομη σύνδεση είναι φθηνότερη στην παρακολούθηση και εμποδίζει ένα στοιχείο να μεταλλάσσει σιωπηλά τα δεδομένα του καλούντος του. Η επόμενη ενότητα χρησιμοποιεί @.
Οδηγίες και Στοιχεία AngularJS: ng-tranclude
Όπως αναφέραμε προηγουμένως, το AngularJS έχει ως στόχο να επεκτείνει τη λειτουργικότητα του HTML. Και έχουμε ήδη δει πώς μπορούμε να έχουμε ένεση κώδικα χρησιμοποιώντας προσαρμοσμένες οδηγίες επαναχρησιμοποίησης.
Αλλά στη σύγχρονη ανάπτυξη εφαρμογών ιστού, υπάρχει και η έννοια της ανάπτυξης.ping στοιχεία ιστού, που ουσιαστικά σημαίνει τη δημιουργία των δικών μας ετικετών HTML που μπορούν να χρησιμοποιηθούν ως στοιχεία στον κώδικά μας.
Ως εκ τούτου, το AngularJS παρέχει ένα άλλο επίπεδο ισχύος για την επέκταση ετικετών HTML, δίνοντας τη δυνατότητα να περιτυλίγεται οποιαδήποτε σήμανση τοποθετεί ο καλών μέσα στην ετικέτα.
Αυτό γίνεται από το «ng-transclude"οδηγία, η οποία λέει στο AngularJS να καταγράψει όλα όσα τοποθετούνται μέσα στην προσαρμοσμένη ετικέτα στο markup και να τα αποθέσει στο πρότυπο σε εκείνο το σημείο.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό. Το στιγμιότυπο οθόνης αριθμεί τα πέντε σημεία που ακολουθούν.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <pane title="{{title}}">Angular JS</pane> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('pane',function(){ return { transclude:true, scope :{title:'@'}, template: '<div style="border: 1px solid black;"> '+ '<ng-transclude></ng-transclude>'+ '</div>' }; }); </script> </body> </html>
Code εξήγηση
- Χρησιμοποιούμε την οδηγία για να ορίσουμε μια προσαρμοσμένη ετικέτα HTML που ονομάζεται "pane", με μια εργοστασιακή συνάρτηση που παρέχει τον κώδικά της. Στην έξοδο, η ετικέτα pane εμφανίζει το κείμενο "Angular JS" σε ένα ορθογώνιο με ένα συμπαγές μαύρο περίγραμμα.
- Η ιδιότητα "transclude" πρέπει να οριστεί σε true, η οποία είναι αυτή που λέει στο AngularJS να διατηρήσει την αρχική εσωτερική σήμανση και να την κάνει διαθέσιμη σε
ng-transclude. - Στο αντικείμενο scope δηλώνουμε μια σύνδεση τίτλου. Τα χαρακτηριστικά συνήθως γράφονται ως ζεύγη ονόματος/τιμής όπως
name="value"Στην περίπτωσή μας, το χαρακτηριστικό στην ετικέτα παραθύρου είναι "title" και το σύμβολο "@" ζητά από το AngularJS να αντιγράψει αυτό το χαρακτηριστικό ως παρεμβαλλόμενη συμβολοσειρά. - Το πρότυπο σχεδιάζει το συμπαγές μαύρο περίγραμμα για τον έλεγχό μας και σηματοδοτεί το σημείο όπου εισάγεται η μεταφερόμενη σήμανση.
- Τέλος, καλούμε την προσαρμοσμένη ετικέτα HTML μαζί με το χαρακτηριστικό title που ορίστηκε.
⚠️ διόρθωση: Το αρχικό κείμενο περιέγραφε το «@» ως «την απαίτηση από το angular». Δεν είναι τυπικότητα: @ είναι ένα από τα τέσσερα σύμβολα σύνδεσης isolate-scope στον παραπάνω πίνακα και πάντα αποδίδει μια συμβολοσειρά. Αυτό το πρότυπο επίσης δεν αποδίδεται ποτέ {{title}}, και κανένας ελεγκτής δεν ορίζει title, επομένως μόνο το μεταφερμένο κείμενο είναι ορατό.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
- Η έξοδος δείχνει το στοιχείο προσαρμοσμένου παραθύρου που αποδίδεται ως πλαίσιο με περίγραμμα που περιέχει το μεταφερόμενο κείμενο "Angular JS".
Μια οδηγία μπορεί επίσης να περιέχει άλλες οδηγίες, και αυτός είναι ο τρόπος με τον οποίο συναρμολογούνται τα μεγαλύτερα εξαρτήματα.
Ενσωματωμένες οδηγίες
Οι οδηγίες στο AngularJS μπορούν να είναι ένθετες. Όπως οι εσωτερικές ενότητες ή οι συναρτήσεις σε οποιοδήποτε γλώσσα προγραμματισμού, ίσως χρειαστεί να ενσωματώσετε οδηγίες μεταξύ τους.
Μπορείτε να κατανοήσετε καλύτερα αυτό βλέποντας το παρακάτω παράδειγμα.
Σε αυτό το παράδειγμα, δημιουργούμε 2 οδηγίες που ονομάζονται "εξωτερική" και "εσωτερική".
- Η εσωτερική οδηγία εμφανίζει ένα κείμενο που ονομάζεται "Inner".
- Ενώ η εξωτερική οδηγία κάνει στην πραγματικότητα μια κλήση στην εσωτερική οδηγία για να εμφανίσει το κείμενο που ονομάζεται "Inner".
Το παρακάτω στιγμιότυπο οθόνης σηματοδοτεί και τους δύο ορισμούς οδηγιών και το σημείο όπου η μία καλεί την άλλη.
</head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <outer></outer> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('outer',function(){ return { restrict:'E', template: '<div><h1>Outer</h1><inner></inner></div>', }}); app.directive('inner',function(){ return { restrict:'E', template: '<div><h1>Inner</h1></div>', } }); </script> </body> </html>
⚠️ Προειδοποίηση — ελάττωμα που διατηρείται σε αυτήν την καταχώριση: Η δημοσιευμένη καταχώριση ξεκινά στις </head>, χάνοντας το άνοιγμά του <!DOCTYPE html>, <html> και <head> γραμμές. Προσθέστε τις πριν το εκτελέσετε.
Code εξήγηση
- Δημιουργούμε μια οδηγία που ονομάζεται «εξωτερική» η οποία θα συμπεριφέρεται ως η μητρική μας οδηγία. Αυτή η οδηγία θα απευθύνει στη συνέχεια την «εσωτερική» οδηγία.
- The
restrict:'E'Η επιλογή λέει στο AngularJS να αντιστοιχίσει κάθε οδηγία με στοιχείο όνομα, γι' αυτό και μπορούν να γραφτούν ως ετικέτες<outer>και<inner>Το γράμμα «Ε» είναι η συντομογραφία της λέξης «Στοιχείο». - Εδώ δημιουργούμε την εσωτερική οδηγία που εμφανίζει το κείμενο "Inner" σε μια ετικέτα div.
- Στο πρότυπο για την εξωτερική οδηγία, καλούμε την εσωτερική οδηγία. Εδώ λοιπόν εισάγουμε το πρότυπο από την εσωτερική οδηγία στην εξωτερική οδηγία.
- Τέλος, επικαλούμαστε ευθέως την εξωτερική οδηγία.
⚠️ διόρθωση: Το αρχικό κείμενο που διεκδικήθηκε restrict:'E' απαιτείται «για να διασφαλιστεί ότι τα δεδομένα από την εσωτερική οδηγία είναι διαθέσιμα στην εξωτερική οδηγία». Δεν κάνει κάτι τέτοιο. ελέγχει μόνο Αυτό που μπερδεύει, είναι το πώς. μπορεί να γραφτεί μια οδηγία. Η ένθεση λειτουργεί επειδή ο μεταγλωττιστής συνεχίζει να περπατάει στο πρότυπο που μόλις εισήγαγε. Για να μοιραστείτε δεδομένα, χρησιμοποιήστε require και controller.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
Από την έξοδο,
- Μπορεί να φανεί ότι έχουν κληθεί τόσο η εξωτερική όσο και η εσωτερική οδηγία και εμφανίζεται το κείμενο και στις δύο ετικέτες div.
Η απόδοση markup είναι μόνο η μισή από αυτήν που κάνει μια οδηγία. Το άλλο μισό είναι η αντίδραση στον χρήστη.
Διαχείριση συμβάντων σε μια οδηγία
Εκδηλώσεις όπως τα κλικ του ποντικιού ή τα κλικ κουμπιών μπορούν να αντιμετωπιστούν μέσα από τις ίδιες τις οδηγίες. Αυτό γίνεται χρησιμοποιώντας τη συνάρτηση σύνδεσης. Η συνάρτηση σύνδεσης είναι αυτή που επιτρέπει στην οδηγία να συνδεθεί με τα στοιχεία DOM σε μια σελίδα HTML.
Σύνταξη:
Η σύνταξη της συνάρτησης σύνδεσης φαίνεται παρακάτω.
link: function ($scope, element, attrs)
Η συνάρτηση σύνδεσης δέχεται κανονικά 3 παραμέτρους: το πεδίο εφαρμογής, το στοιχείο με το οποίο σχετίζεται η οδηγία και τα χαρακτηριστικά του στοιχείου-στόχου. Δύο ακόμη, ένας απαιτούμενος ελεγκτής και μια συνάρτηση transclude, εμφανίζονται όταν εφαρμόζονται.
Φάση μεταγλώττισης έναντι φάσης σύνδεσης
Το AngularJS επεξεργάζεται μια οδηγία σε δύο περάσματα και γνωρίζοντας ποια είναι ποια, σας λέει πού ανήκει ο κώδικάς σας.
- Μεταγλωττίστε Εκτελείται μία φορά στο στοιχείο προτύπου, πριν υπάρξει οποιοδήποτε πεδίο εφαρμογής. Ταιριάζει σε δομικές επεξεργασίες που μοιράζονται κάθε κλώνος.
- Σύνδεσμος εκτελείται μία φορά ανά παρουσία, αφού κλωνοποιηθεί το πρότυπο και προσαρτηθεί ένα πεδίο εφαρμογής. Οι ακροατές DOM και οι αναγνώσεις πεδίου εφαρμογής ανήκουν εδώ.
Επειδή η μεταγλώττιση δεν έχει πεδίο εφαρμογής, οτιδήποτε χρειάζεται δεδομένα ανήκει στον σύνδεσμο, γι' αυτό και το παρακάτω παράδειγμα ορίζει link μόνος.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό. Το στιγμιότυπο οθόνης αριθμεί τα τέσσερα σημεία παρακάτω.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru="">Click Me</div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { link:function($scope,element,attrs) { element.bind('click',function () { element.html('You clicked me'); });} }}); </script> </body> </html>
Code εξήγηση
- Χρησιμοποιούμε τη συνάρτηση link όπως ορίζεται στο AngularJS για να δώσουμε στην οδηγία τη δυνατότητα πρόσβασης σε συμβάντα στο HTML DOM.
- Χρησιμοποιούμε τη λέξη-κλειδί 'element' επειδή θέλουμε να ανταποκριθούμε σε ένα συμβάν για ένα στοιχείο HTML DOM, το οποίο στην περίπτωσή μας είναι το στοιχείο "div". Στη συνέχεια, χρησιμοποιούμε τη συνάρτηση "bind" για να προσθέσουμε προσαρμοσμένη λειτουργικότητα στο συμβάν κλικ του στοιχείου. Η λέξη 'click' είναι η λέξη-κλειδί που χρησιμοποιείται για να υποδηλώσει το συμβάν κλικ οποιουδήποτε στοιχείου ελέγχου HTML.
- Εδώ λέμε ότι θέλουμε να αντικαταστήσουμε τον εσωτερικό κώδικα HTML του στοιχείου, στην περίπτωσή μας του στοιχείου div, με το κείμενο «Μου κάνατε κλικ».
- Εδώ ορίζουμε την ετικέτα div μας για να χρησιμοποιήσουμε την προσαρμοσμένη οδηγία ng-guru.
💡 Συμβουλή: Μια οδηγία θα πρέπει να καθαρίζεται από μόνη της. Αφαιρέστε οποιονδήποτε ακροατή που έχει επιβιώσει από το στοιχείο που υπάρχει μέσα. element.on('$destroy', ...)ή η σελίδα έχει διαρροή μνήμης.
Εάν ο κώδικας εκτελεστεί με επιτυχία, εμφανίζεται αυτή η έξοδος.
Παραγωγή:
- Αρχικά, εμφανίζεται στον χρήστη το κείμενο «Κάντε κλικ σε εμένα», επειδή αυτό ορίστηκε μέσα στην ετικέτα div. Όταν κάνετε κλικ στην ετικέτα div, εμφανίζεται η παρακάτω έξοδος.
Κάθε παραπάνω παράδειγμα χρησιμοποίησε μία ή δύο ιδιότητες του ίδιου αντικειμένου ορισμού. Αξίζει να το διαβάσετε ολόκληρο.ping στο χέρι.
Ορισμός Οδηγίας Ιδιότητες Αντικειμένου Αναφορά
Το αντικείμενο που επιστρέφεται από ένα εργοστάσιο οδηγιών είναι το Οδηγία Ορισμός ΑντικείμενοΚάθε ιδιότητα απαντά σε μία ερώτηση σχετικά με τον τρόπο συμπεριφοράς της οδηγίας.
| Ιδιοκτησία | Προεπιλογή | Τι κάνει |
|---|---|---|
| περιορίζω | «ΕΑ» | Ποιες μορφές ταιριάζουν: Στοιχείο E, χαρακτηριστικό A, κλάση C, σχόλιο M |
| πρότυπο | κανένας | Εισήχθη ενσωματωμένη σήμανση στο αντιστοιχισμένο στοιχείο |
| templateUrl | κανένας | Διαδρομή αρχείου προτύπου, ανακτήθηκε μία φορά και στη συνέχεια αποθηκεύτηκε στην προσωρινή μνήμη |
| έκταση | ψευδής | Το false μοιράζεται το γονικό πεδίο εφαρμογής, το true δημιουργεί ένα θυγατρικό αντικείμενο, ένα αντικείμενο απομονώνει |
| ελεγκτής | κανένας | Ο κατασκευαστής που εκθέτει ένα API μπορεί να απαιτήσει άλλες οδηγίες |
| ελεγκτήςAs | κανένας | Ψευδώνυμο για τον ελεγκτή μέσα στο πρότυπο |
| απαιτούν | κανένας | Ελεγκτής άλλης οδηγίας για ένεση· ^ αναζητά γονείς, ^^ παραλείπει τον εαυτό, ? προαιρετικό |
| σύνδεσμος | κανένας | Συνάρτηση ανά περίπτωση: πεδίο εφαρμογής, στοιχείο, χαρακτηριστικά, ελεγκτής, transcludeFn |
| συντάσσω | κανένας | Εκτελείται μία φορά στο πρότυπο πριν υπάρξει οποιοδήποτε πεδίο εφαρμογής |
| μεταφράζω | ψευδής | Διατηρεί την αρχική εσωτερική σήμανση για το ng-transclude |
| προτεραιότητα | 0 | Μεταγλώττιση σειράς σε ένα κοινόχρηστο στοιχείο. Οι υψηλότερες εκτελέσεις πρώτα |
| τερματικό | ψευδής | Σταματά τις οδηγίες χαμηλότερης προτεραιότητας σε αυτό το στοιχείο |
| αντικαθιστώ | ψευδής | Αντικαθιστά το στοιχείο με το πρότυπο. Καταργήθηκε από την έκδοση 1.3. |
💡 Συμβουλή: Ξεκινήστε με restrict, template και link. Προσθέστε scope για επαναχρησιμοποίηση, controller και require για κλήσεις από οδηγία σε οδηγία και αφήστε priority και terminal μόνος.
