CUSTOM Directives στο AngularJS: Πώς να δημιουργήσετε; [Παραδείγματα]

Τι είναι η Custom Directive;

A Προσαρμοσμένη οδηγία στο AngularJS είναι μια οδηγία που ορίζεται από το χρήστη που παρέχει στους χρήστες τη χρήση επιθυμητών συναρτήσεων για την επέκταση της λειτουργικότητας HTML. Μπορεί να οριστεί χρησιμοποιώντας τη συνάρτηση «directive» και αντικαθιστά το στοιχείο για το οποίο χρησιμοποιείται. Παρόλο που το AngularJS έχει πολλές ισχυρές οδηγίες, μερικές φορές απαιτούνται προσαρμοσμένες οδηγίες.

Πώς να δημιουργήσετε μια προσαρμοσμένη οδηγία;

Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να δημιουργήσουμε μια προσαρμοσμένη οδηγία AngularJS.

Η προσαρμοσμένη οδηγία στην περίπτωσή μας απλώς θα εισάγει μια ετικέτα div που έχει το κείμενο "AngularJS 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>

Επεξήγηση κώδικα

Πρώτα δημιουργούμε ένα ενότητα για τη γωνιακή μας εφαρμογή. Αυτό απαιτείται για τη δημιουργία μιας προσαρμοσμένης οδηγίας, επειδή η οδηγία θα δημιουργηθεί χρησιμοποιώντας αυτήν την ενότητα.
Τώρα δημιουργούμε μια προσαρμοσμένη οδηγία που ονομάζεται "ngGuru" και ορίζουμε μια συνάρτηση που θα έχει προσαρμοσμένο κώδικα για την οδηγία μας.Σημείωση: - Σημειώστε ότι κατά τον ορισμό της οδηγίας, την έχουμε ορίσει ως ngGuru με κεφαλαίο το γράμμα «G». Και όταν έχουμε πρόσβαση από την ετικέτα div μας ως οδηγία, έχουμε πρόσβαση σε αυτήν ως ng-guru. Έτσι κατανοεί η angular τις προσαρμοσμένες οδηγίες που ορίζονται σε μια εφαρμογή. Πρώτον, το όνομα της προσαρμοσμένης οδηγίας πρέπει να ξεκινά με τα γράμματα «ng». Δεύτερον, το σύμβολο της παύλας «-» πρέπει να αναφέρεται μόνο όταν καλείτε την οδηγία. Και τρίτον, το πρώτο γράμμα μετά τα γράμματα «ng» κατά τον ορισμό της οδηγίας μπορεί να είναι είτε πεζό είτε κεφαλαίο.
Χρησιμοποιούμε την παράμετρο προτύπου που είναι μια παράμετρος που ορίζεται από την Angular για προσαρμοσμένες οδηγίες. Σε αυτό, ορίζουμε ότι όποτε χρησιμοποιείται αυτή η οδηγία, τότε απλώς χρησιμοποιήστε την τιμή του προτύπου και εισάγετέ το στον κωδικό κλήσης.
Εδώ χρησιμοποιούμε τώρα την προσαρμοσμένη μας οδηγία "ng-guru". Όταν το κάνουμε αυτό, η τιμή που ορίσαμε για το πρότυπό μας " Εκμάθηση Angular JS ” θα γίνει τώρα η ένεση εδώ.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Η παραπάνω έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη μας οδηγία ng-guru, η οποία έχει το πρότυπο που έχει οριστεί για την εμφάνιση ενός προσαρμοσμένου κειμένου, εμφανίζεται στο πρόγραμμα περιήγησης.

Οδηγίες και πεδίο εφαρμογής της AngularJs

Το εύρος ορίζεται ως η κόλλα που συνδέει τον ελεγκτή με την προβολή διαχειριζόμενος τα δεδομένα μεταξύ της προβολής και του ελεγκτή.

Κατά τη δημιουργία προσαρμοσμένων οδηγιών AngularJs, από προεπιλογή θα έχουν πρόσβαση στο αντικείμενο πεδίου στον γονικό ελεγκτή.

Με αυτόν τον τρόπο, γίνεται εύκολο για την προσαρμοσμένη οδηγία να κάνει χρήση των δεδομένων που διαβιβάζονται στον κύριο ελεγκτή.

Ας δούμε ένα παράδειγμα προσαρμοσμένης οδηγίας 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-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>

Επεξήγηση κώδικα

Πρώτα δημιουργούμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό, ορίζουμε μια μεταβλητή που ονομάζεται tutorialName και την επισυνάπτουμε στο αντικείμενο scope σε μία πρόταση – $scope.tutorialName = “AngularJS”.
Στην προσαρμοσμένη οδηγία μας, μπορούμε να ονομάσουμε τη μεταβλητή "tutorialName" χρησιμοποιώντας μια έκφραση. Αυτή η μεταβλητή θα είναι προσβάσιμη επειδή ορίζεται στον ελεγκτή "DemoController", ο οποίος θα γίνει ο μητρικός για αυτήν την οδηγία.
Αναφέρουμε τον ελεγκτή σε μια ετικέτα div, η οποία θα λειτουργεί ως γονική ετικέτα div. Σημειώστε ότι αυτό πρέπει να γίνει πρώτα προκειμένου η προσαρμοσμένη μας οδηγία να έχει πρόσβαση στη μεταβλητή tutorialName.
Τελικά απλώς επισυνάπτουμε την προσαρμοσμένη οδηγία "ng-guru" στην ετικέτα div μας.

Παραγωγή:

Η παραπάνω έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία "ng-guru" χρησιμοποιεί τη μεταβλητή εμβέλειας tutorialName στον γονικό ελεγκτή.

Χρήση ελεγκτών με οδηγίες

Το Angular δίνει τη δυνατότητα να πρόσβαση στη μεταβλητή μέλους του ελεγκτή απευθείας από προσαρμοσμένες οδηγίες χωρίς την ανάγκη του αντικειμένου πεδίου.

Αυτό καθίσταται απαραίτητο μερικές φορές, επειδή σε μια εφαρμογή μπορεί να έχετε πολλαπλά αντικείμενα εμβέλειας που ανήκουν σε πολλούς ελεγκτές.

Επομένως, υπάρχει μεγάλη πιθανότητα να κάνετε το λάθος να αποκτήσετε πρόσβαση στο αντικείμενο εμβέλειας του λάθος ελεγκτή.

Σε τέτοια σενάρια υπάρχει ένας τρόπος να αναφέρω συγκεκριμένα λέγοντας "Θέλω να αποκτήσω πρόσβαση σε αυτόν τον συγκεκριμένο ελεγκτή" από την οδηγία μου.

Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό.

<!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>

Επεξήγηση κώδικα

Πρώτα δημιουργούμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό θα ορίσουμε μια μεταβλητή που ονομάζεται "tutorialName" και αυτή τη φορά αντί να την προσαρτήσουμε στο αντικείμενο scope, θα την προσαρτήσουμε απευθείας στον ελεγκτή.
Στην προσαρμοσμένη οδηγία μας, αναφέρουμε συγκεκριμένα ότι θέλουμε να χρησιμοποιήσουμε τον ελεγκτή "DemoController" χρησιμοποιώντας τη λέξη-κλειδί παραμέτρου ελεγκτή.
Δημιουργούμε μια αναφορά στον ελεγκτή χρησιμοποιώντας την παράμετρο "controllerAs". Αυτό ορίζεται από το Angular και είναι ο τρόπος αναφοράς του ελεγκτή ως αναφοράς.

Σημείωση: -Είναι δυνατή η πρόσβαση σε πολλούς ελεγκτές σε μια οδηγία καθορίζοντας αντίστοιχα μπλοκ του ελεγκτή, controllerAs και δηλώσεων προτύπου.

Τέλος, στο πρότυπό μας, χρησιμοποιούμε την αναφορά που δημιουργήθηκε στο βήμα 3 και χρησιμοποιούμε τη μεταβλητή μέλους που προσαρτήθηκε απευθείας στον ελεγκτή στο Βήμα 1.

Παραγωγή:

Η έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία έχει ειδικά πρόσβαση στον DemoController και στο tutorialName της μεταβλητής μέλους που είναι συνημμένο σε αυτό και εμφανίζει το κείμενο "Angular".

Πώς να δημιουργήσετε επαναχρησιμοποιήσιμες οδηγίες

Έχουμε ήδη δει τη δύναμη των προσαρμοσμένων οδηγιών, αλλά μπορούμε να το μεταφέρουμε στο επόμενο επίπεδο δημιουργώντας τις δικές μας επαναχρησιμοποιήσιμες οδηγίες.

Ας πούμε, για παράδειγμα, ότι θέλαμε να εισάγουμε κώδικα που θα εμφανίζει πάντα τις παρακάτω ετικέτες HTML σε πολλές οθόνες, κάτι που ουσιαστικά είναι απλώς μια είσοδος για το "Όνομα" και την "ηλικία" του χρήστη.

Για να επαναχρησιμοποιήσουμε αυτήν τη λειτουργία σε πολλές οθόνες χωρίς κωδικοποίηση κάθε φορά, δημιουργούμε ένα κύριο στοιχείο ελέγχου ή οδηγία σε γωνιακή γωνία για να κρατάμε αυτά τα στοιχεία ελέγχου ("Όνομα" και "ηλικία" του χρήστη).

Έτσι τώρα, αντί να εισάγουμε τον ίδιο κωδικό για την παρακάτω οθόνη κάθε φορά, μπορούμε πραγματικά να ενσωματώσουμε αυτόν τον κωδικό σε μια οδηγία και να ενσωματώσουμε αυτήν την οδηγία ανά πάσα στιγμή.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό.

<!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: '&nbsp;&nbsp;Name <input type="text"><br><br>&nbsp;&nbsp;&nbsp;Age<input type="text">'
        };
    });

</script>

</body>
</html>

Επεξήγηση κώδικα

Στο απόσπασμα κώδικα για μια προσαρμοσμένη οδηγία, αυτό που αλλάζει είναι απλώς η τιμή που δίνεται στην παράμετρο προτύπου της προσαρμοσμένης οδηγίας μας. Αντί για μια ετικέτα σχεδίου πέντε ή κείμενο, στην πραγματικότητα εισάγουμε ολόκληρο το τμήμα των 2 στοιχείων ελέγχου εισόδου για το " Όνομα» και «ηλικία» που πρέπει να εμφανίζονται στη σελίδα μας.

Παραγωγή:

Από την παραπάνω έξοδο, μπορούμε να δούμε ότι το απόσπασμα κώδικα από το πρότυπο της προσαρμοσμένης οδηγίας προστίθεται στη σελίδα.

Οδηγίες και στοιχεία AngularJS – ng-transclude

Όπως αναφέραμε αρκετά νωρίτερα, το Angular προορίζεται να επεκτείνει τη λειτουργικότητα του HTML. Και έχουμε ήδη δει πώς μπορούμε να έχουμε ένεση κώδικα χρησιμοποιώντας προσαρμοσμένες οδηγίες επαναχρησιμοποίησης.

Αλλά στη σύγχρονη ανάπτυξη εφαρμογών ιστού, υπάρχει επίσης μια ιδέα ανάπτυξης στοιχείων Ιστού. Πράγμα που ουσιαστικά σημαίνει τη δημιουργία των δικών μας ετικετών HTML που μπορούν να χρησιμοποιηθούν ως στοιχεία στον κώδικά μας.

Ως εκ τούτου, το angular παρέχει ένα άλλο επίπεδο ισχύος για την επέκταση των ετικετών HTML, δίνοντας τη δυνατότητα εισαγωγής χαρακτηριστικών στις ίδιες τις ετικέτες HTML.

Αυτό γίνεται από το «ng-transclude” ετικέτα, η οποία είναι ένα είδος ρύθμισης για να πει γωνιακή για να καταγράψει όλα όσα έχουν τοποθετηθεί μέσα στην οδηγία στη σήμανση.

Ας πάρουμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό.

<!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>

Επεξήγηση κώδικα

Χρησιμοποιούμε την οδηγία για να ορίσουμε μια προσαρμοσμένη ετικέτα HTML που ονομάζεται «παράθυρο» και προσθέτουμε μια συνάρτηση που θα βάλει κάποιο προσαρμοσμένο κώδικα για αυτήν την ετικέτα. Στην έξοδο, η προσαρμοσμένη ετικέτα παραθύρου μας θα εμφανίσει το κείμενο "AngularJS" σε ένα ορθογώνιο με συμπαγές μαύρο περίγραμμα.
Το χαρακτηριστικό "transclude" πρέπει να αναφέρεται ως αληθές, το οποίο απαιτείται από το angular για την εισαγωγή αυτής της ετικέτας στο DOM μας.
Στο πεδίο εφαρμογής, ορίζουμε ένα χαρακτηριστικό τίτλου. Τα χαρακτηριστικά ορίζονται συνήθως ως ζεύγη ονόματος/τιμής όπως: name=”value”. Στην περίπτωσή μας, το όνομα του χαρακτηριστικού στην ετικέτα HTML του παραθύρου μας είναι "title". Το σύμβολο "@" είναι η απαίτηση από γωνιακή. Αυτό γίνεται έτσι ώστε όταν εκτελείται η γραμμή title={{title}} στο Βήμα 5, ο προσαρμοσμένος κώδικας για το χαρακτηριστικό title προστίθεται στην ετικέτα HTML του παραθύρου.
Ο προσαρμοσμένος κώδικας για τα χαρακτηριστικά τίτλου που απλώς σχεδιάζει ένα συμπαγές μαύρο περίγραμμα για τον έλεγχό μας.
Τέλος, καλούμε την προσαρμοσμένη μας ετικέτα HTML μαζί με το χαρακτηριστικό τίτλος που ορίστηκε.

Παραγωγή:

Η έξοδος δείχνει ξεκάθαρα ότι το χαρακτηριστικό τίτλος της ετικέτας html5 του παραθύρου έχει οριστεί στην προσαρμοσμένη τιμή του "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>

Επεξήγηση κώδικα

Δημιουργούμε μια οδηγία που ονομάζεται «εξωτερική» η οποία θα συμπεριφέρεται ως η μητρική μας οδηγία. Αυτή η οδηγία θα απευθύνει στη συνέχεια την «εσωτερική» οδηγία.
Ο περιορισμός: 'E' απαιτείται από το angular για να διασφαλίσει ότι τα δεδομένα από την εσωτερική οδηγία είναι διαθέσιμα στην εξωτερική οδηγία. Το γράμμα «Ε» είναι η σύντομη μορφή της λέξης «Στοιχείο».
Εδώ δημιουργούμε την εσωτερική οδηγία που εμφανίζει το κείμενο "Inner" σε μια ετικέτα div.
Στο πρότυπο για την εξωτερική οδηγία (βήμα # 4), καλούμε την εσωτερική οδηγία. Εδώ λοιπόν εισάγουμε το πρότυπο από την εσωτερική οδηγία στην εξωτερική οδηγία.
Τέλος, επικαλούμαστε ευθέως την εξωτερική οδηγία.

Παραγωγή:

Από την έξοδο,

Μπορεί να φανεί ότι έχουν κληθεί τόσο η εξωτερική όσο και η εσωτερική οδηγία και εμφανίζεται το κείμενο και στις δύο ετικέτες div.

Χειρισμός συμβάντων σε μια οδηγία

Εκδηλώσεις Αυτά τα κλικ του ποντικιού ή τα κλικ κουμπιών μπορούν να αντιμετωπιστούν από τις ίδιες τις οδηγίες. Αυτό γίνεται χρησιμοποιώντας τη λειτουργία σύνδεσης. Η συνάρτηση σύνδεσης είναι αυτή που επιτρέπει στην οδηγία να προσαρτηθεί στα στοιχεία DOM σε μια σελίδα HTML.

Σύνταξη:

Η σύνταξη του στοιχείου συνδέσμου είναι όπως φαίνεται παρακάτω

ng-επανάληψη

link: function ($scope, element, attrs)

Η συνάρτηση σύνδεσης δέχεται συνήθως 3 παραμέτρους, συμπεριλαμβανομένου του πεδίου εφαρμογής, του στοιχείου με το οποίο σχετίζεται η οδηγία και των χαρακτηριστικών του στοιχείου στόχου.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το πετύχουμε αυτό.

<!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>

Επεξήγηση κώδικα

Χρησιμοποιούμε τη συνάρτηση σύνδεσης όπως ορίζεται γωνιακά για να δώσουμε τη δυνατότητα των οδηγιών να έχουν πρόσβαση σε συμβάντα στο HTML DOM.
Χρησιμοποιούμε τη λέξη-κλειδί 'στοιχείο' επειδή θέλουμε να απαντήσουμε σε ένα συμβάν για ένα στοιχείο HTML DOM, το οποίο στην περίπτωσή μας θα είναι το στοιχείο "div". Στη συνέχεια, χρησιμοποιούμε τη συνάρτηση «σύνδεση» και λέμε ότι θέλουμε να προσθέσουμε προσαρμοσμένη λειτουργικότητα στο συμβάν κλικ του στοιχείου. Η λέξη «κλικ» είναι η λέξη-κλειδί, η οποία χρησιμοποιείται για να υποδηλώσει το συμβάν κλικ οποιουδήποτε στοιχείου ελέγχου HTML. Για παράδειγμα, το στοιχείο ελέγχου κουμπιού HTML έχει το συμβάν κλικ. Εφόσον, στο παράδειγμά μας, θέλουμε να προσθέσουμε έναν προσαρμοσμένο κώδικα στο συμβάν κλικ της ετικέτας «dev» μας, χρησιμοποιούμε τη λέξη-κλειδί «κλικ».
Εδώ λέμε ότι θέλουμε να αντικαταστήσουμε το εσωτερικό HTML του στοιχείου (στην περίπτωσή μας το στοιχείο div) με το κείμενο «Με έκανες κλικ!».
Εδώ ορίζουμε την ετικέτα div μας για να χρησιμοποιήσουμε την προσαρμοσμένη οδηγία ng-guru.

Παραγωγή:

Αρχικά το κείμενο "Κάντε κλικ σε εμένα" θα εμφανιστεί στον χρήστη, επειδή αυτό έχει οριστεί αρχικά στην ετικέτα div. Όταν κάνετε πραγματικά κλικ στην ετικέτα div, θα εμφανιστεί η παρακάτω έξοδος

Σύνοψη

Κάποιος μπορεί επίσης να δημιουργήσει μια προσαρμοσμένη οδηγία που μπορεί να χρησιμοποιηθεί για την εισαγωγή κώδικα στην κύρια γωνιακή εφαρμογή.
Μπορούν να γίνουν προσαρμοσμένες οδηγίες για την κλήση μελών που ορίζονται στο αντικείμενο πεδίου σε έναν συγκεκριμένο ελεγκτή, χρησιμοποιώντας τις λέξεις-κλειδιά "Controller", "controllerAs" και "template".
Οι οδηγίες μπορούν επίσης να ενσωματωθούν για να παρέχουν ενσωματωμένη λειτουργικότητα που μπορεί να απαιτείται ανάλογα με τις ανάγκες της εφαρμογής.
Οι οδηγίες μπορούν επίσης να επαναχρησιμοποιηθούν, ώστε να μπορούν να χρησιμοποιηθούν για την εισαγωγή κοινού κώδικα που θα μπορούσε να απαιτείται σε διάφορες εφαρμογές Ιστού.
Οι οδηγίες μπορούν επίσης να χρησιμοποιηθούν για τη δημιουργία προσαρμοσμένων ετικετών HTML που θα έχουν τη δική τους λειτουργικότητα που ορίζεται σύμφωνα με τις επιχειρηματικές απαιτήσεις.
Τα συμβάντα μπορούν επίσης να χειριστούν μέσα από οδηγίες για να χειριστούν συμβάντα DOM, όπως κλικ κουμπιών και ποντικιού.

Τι είναι η Custom Directive;

Πώς να δημιουργήσετε μια προσαρμοσμένη οδηγία;

Επεξήγηση κώδικα

Οδηγίες και πεδίο εφαρμογής της AngularJs

Επεξήγηση κώδικα

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Χρήση ελεγκτών με οδηγίες

Επεξήγηση κώδικα

Πώς να δημιουργήσετε επαναχρησιμοποιήσιμες οδηγίες

Επεξήγηση κώδικα

Οδηγίες και στοιχεία AngularJS – ng-transclude

Επεξήγηση κώδικα

Ένθετες οδηγίες

Επεξήγηση κώδικα

Χειρισμός συμβάντων σε μια οδηγία

Επεξήγηση κώδικα

Σύνοψη

Ημερήσιο ενημερωτικό δελτίο Guru99