Κατά τη δημιουργία διαδικτυακών εφαρμογών, αργά ή γρήγορα η εφαρμογή σας θα πρέπει να χειρίζεται συμβάντα DOM όπως κλικ ποντικιού, κινήσεις, πιέσεις πληκτρολογίου, αλλαγή συμβάντων κ.λπ.
Το AngularJS μπορεί να προσθέσει λειτουργικότητα που μπορεί να χρησιμοποιηθεί για τον χειρισμό τέτοιων συμβάντων.
Για παράδειγμα, εάν υπάρχει ένα κουμπί στη σελίδα και θέλετε να επεξεργαστείτε κάτι όταν κάνετε κλικ στο κουμπί, μπορούμε να χρησιμοποιήσουμε την οδηγία συμβάντων ng-click.
Θα εξετάσουμε λεπτομερώς τις οδηγίες συμβάντων κατά τη διάρκεια αυτού του μαθήματος.
Σε αυτό το σεμινάριο, θα μάθετε-
- Τι είναι η οδηγία ng-click;
- Τι είναι η οδηγία ng-show;
- Τι είναι η οδηγία ng-hide;
Τι είναι η οδηγία ng-click;
Η "οδηγία ng-click" χρησιμοποιείται για την εφαρμογή προσαρμοσμένης συμπεριφοράς όταν έγινε κλικ σε ένα στοιχείο σε HTML. Αυτό χρησιμοποιείται συνήθως για κουμπιά, επειδή είναι το πιο κοινό μέρος για την προσθήκη συμβάντων που ανταποκρίνονται σε κλικ που πραγματοποιούνται από τον χρήστη
Ας δούμε ένα απλό παράδειγμα για το πώς μπορούμε να εφαρμόσουμε το συμβάν κλικ.
Σε αυτό το παράδειγμα, θα έχουμε μια μεταβλητή μετρητή η οποία θα αυξάνει την αξία όταν ο χρήστης κάνει κλικ σε ένα κουμπί.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Επεξήγηση κώδικα:
- Χρησιμοποιούμε πρώτα την οδηγία ng-init για να ορίσουμε την τιμή ενός τοπικού αριθμού μεταβλητών σε 0.
- Στη συνέχεια, εισάγουμε την οδηγία συμβάντων ng-click στο κουμπί. Σε αυτήν την οδηγία, γράφουμε κώδικα για να αυξήσουμε την τιμή της μεταβλητής μέτρησης κατά 1.
- Εδώ παρουσιάζουμε την τιμή της μεταβλητής μέτρησης στον χρήστη.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την παραπάνω έξοδο,
- Μπορούμε να δούμε ότι εμφανίζεται το κουμπί "Αύξηση" και η τιμή της μεταβλητής μέτρησης είναι αρχικά μηδέν.
- Όταν κάνετε κλικ στο κουμπί αύξησης, η τιμή του αριθμού αυξάνεται ανάλογα, όπως φαίνεται στην παρακάτω εικόνα εξόδου.
Τι είναι η οδηγία ng-show;
Η οδηγία ng-Show χρησιμοποιείται για την εμφάνιση ή απόκρυψη ενός δεδομένου στοιχείου HTML με βάση την έκφραση που παρέχεται στο χαρακτηριστικό ngShow. Στο παρασκήνιο, το στοιχείο εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση .ng-hide CSS στο στοιχείο.
Στο παρασκήνιο, το στοιχείο εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση .ng-hide CSS στο στοιχείο.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε την οδηγία "ngshow event" για να εμφανίσουμε ένα κρυφό στοιχείο.
Event Registration Guru99 Global Event
Angular
Επεξήγηση κώδικα:
- Συνδέουμε την οδηγία συμβάντων ng-click στο στοιχείο κουμπιού. Εδώ αναφέρουμε μια συνάρτηση που ονομάζεται "ShowHide" η οποία ορίζεται στον ελεγκτή μας - DemoController.
- Συνδέουμε το χαρακτηριστικό ng-show σε μια ετικέτα div που περιέχει το κείμενο Γωνιακό. Αυτή είναι η ετικέτα που πρόκειται να εμφανίσουμε / αποκρύψουμε με βάση το χαρακτηριστικό ng-show.
-
Στον ελεγκτή, επισυνάπτουμε τη μεταβλητή μέλους "IsVisible" στο αντικείμενο πεδίου. Αυτό το χαρακτηριστικό θα μεταφερθεί στο γωνιακό χαρακτηριστικό ng-show (βήμα # 2) για τον έλεγχο της ορατότητας του ελέγχου div. Αρχικά το ρυθμίζουμε σε ψευδές έτσι ώστε όταν εμφανίζεται η σελίδα για πρώτη φορά η ετικέτα div θα είναι κρυφή.
Σημείωση: - Όταν τα χαρακτηριστικά ng-show έχουν οριστεί σε true, ο επόμενος έλεγχος που στην περίπτωσή μας είναι η ετικέτα div θα εμφανίζεται στον χρήστη. Όταν το χαρακτηριστικό ng-show έχει οριστεί σε false, ο έλεγχος θα αποκρύπτεται από τον χρήστη.
- Προσθέτουμε κώδικα στη συνάρτηση ShowHide, η οποία θα ορίσει τη μεταβλητή μέλους IsVisible σε true, έτσι ώστε η ετικέτα div να μπορεί να εμφανίζεται στον χρήστη.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Έξοδος: 1
Από την έξοδο,
- Αρχικά μπορείτε να δείτε ότι η ετικέτα div που έχει το κείμενο "AngularJS" δεν εμφανίζεται και αυτό οφείλεται στο γεγονός ότι το αντικείμενο εύρους isVisible ορίζεται αρχικά σε false το οποίο στη συνέχεια μεταφέρεται στην οδηγία ng-show της ετικέτας div.
- Όταν κάνετε κλικ στο κουμπί "Εμφάνιση AngularJS", αλλάζει η μεταβλητή μέλους isVisible για να γίνει αληθινή και ως εκ τούτου το κείμενο "Angular" γίνεται ορατό στον χρήστη. Η παρακάτω έξοδος θα εμφανίζεται στον χρήστη.
Η έξοδος δείχνει τώρα την ετικέτα div με το γωνιακό κείμενο.
Τι είναι η οδηγία ng-hide;
Με την οδηγία ng-hide ένα στοιχείο θα αποκρυφτεί εάν η έκφραση είναι ΑΛΗΘΕΙΑ. Εάν η έκφραση είναι λάθος, το στοιχείο θα εμφανιστεί. Στο παρασκήνιο, το στοιχείο εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση .ng-hide CSS στο στοιχείο.
Από την άλλη με το ng-απόκρυψη, το στοιχείο είναι κρυφό εάν η έκφραση είναι αληθινή και θα εμφανίζεται εάν είναι ψευδής.
Ας δούμε το παρόμοιο παράδειγμα με αυτό που εμφανίζεται στο ngShow για να δείξουμε πώς μπορεί να χρησιμοποιηθεί το χαρακτηριστικό ngHide.
Event Registration Guru99 Global Event
Angular
Επεξήγηση κώδικα:
- Συνδέουμε την οδηγία συμβάντων ng-click στο στοιχείο κουμπιού. Εδώ αναφέρουμε μια συνάρτηση που ονομάζεται ShowHide η οποία ορίζεται στον ελεγκτή μας - DemoController.
- Συνδέουμε το χαρακτηριστικό ng-hide σε μια ετικέτα div που περιέχει το κείμενο Γωνιακό. Αυτή είναι η ετικέτα, την οποία πρόκειται να εμφανίσουμε / αποκρύψουμε με βάση το χαρακτηριστικό ng-show.
- Στον ελεγκτή, συνδέουμε τη μεταβλητή μέλους isVisible στο αντικείμενο πεδίου. Αυτό το χαρακτηριστικό θα μεταφερθεί στο γωνιακό χαρακτηριστικό ng-show για τον έλεγχο της ορατότητας του ελέγχου div. Αρχικά το ρυθμίζουμε σε ψευδές έτσι ώστε όταν εμφανίζεται η σελίδα για πρώτη φορά η ετικέτα div θα είναι κρυφή.
- Προσθέτουμε κώδικα στη συνάρτηση ShowHide, η οποία θα ορίσει τη μεταβλητή μέλους IsVisible σε true, έτσι ώστε η ετικέτα div να μπορεί να εμφανίζεται στον χρήστη.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
- Αρχικά μπορείτε να δείτε ότι η ετικέτα div που έχει το κείμενο "AngularJs" εμφανίζεται αρχικά επειδή η τιμή ιδιότητας του false αποστέλλεται στην οδηγία ng-hide.
- Όταν κάνουμε κλικ στο κουμπί "Απόκρυψη γωνιακής", η τιμή ιδιότητας του true will θα σταλεί στην οδηγία ng-hide. Ως εκ τούτου θα εμφανιστεί η παρακάτω έξοδος, στην οποία θα κρύβεται η λέξη "Γωνιακή".
Οδηγίες ακρόασης συμβάντων AngularJS
Μπορείτε να προσθέσετε ακροατές συμβάντων AngularJS στα στοιχεία HTML χρησιμοποιώντας μία ή περισσότερες από αυτές τις οδηγίες:
- ng-θαμπάδα
- ng-αλλαγή
- ng-κλικ
- ng-αντίγραφο
- περικοπή
- ng-dblclick
- ng-εστίαση
- ng-κλειδί
- ng-πλήκτρο
- ng-keyup
- ng-mousedown
- ng-ποντίκι
- ng-mouseleave
- ng-mousemove
- ng-ποντίκι
- ng-ποντίκι
- ng-επικόλληση
Περίληψη
- Οι οδηγίες συμβάντων χρησιμοποιούνται στο Angular για την προσθήκη προσαρμοσμένου κώδικα για την απόκριση σε συμβάντα που δημιουργούνται από την παρέμβαση του χρήστη, όπως κλικ σε κουμπιά, κλικ σε πληκτρολόγιο και ποντίκι κ.λπ.
- Η πιο κοινή οδηγία συμβάντων είναι η οδηγία ng-click που χρησιμοποιείται για τον χειρισμό συμβάντων κλικ. Η πιο συνηθισμένη χρήση αυτού είναι για κλικ στα κουμπιά όπου μπορεί να προστεθεί κώδικας για να ανταποκριθεί σε ένα κλικ στο κουμπί.
- Τα στοιχεία HTML μπορούν επίσης να κρυφτούν ή να εμφανιστούν στον χρήστη ανάλογα, χρησιμοποιώντας τα γωνιακά χαρακτηριστικά ng-show και ng-hide.