Direttive CUSTOM in AngularJS: come creare? [Esempi]
James Hartmann
Cos'è la direttiva doganale?
A Direttiva doganale in AngularJS è una direttiva definita dall'utente che consente agli utenti di utilizzare le funzioni desiderate per estendere la funzionalità HTML. Può essere definita utilizzando la funzione "direttiva" e sostituisce l'elemento per cui viene utilizzata. Anche se AngularJS ha molte direttive potenti pronte all'uso, a volte sono necessarie direttive personalizzate.
Come creare una direttiva personalizzata?
Diamo un'occhiata ad un esempio di come possiamo creare una direttiva personalizzata AngularJS.
La direttiva personalizzata nel nostro caso inietterà semplicemente un tag div che contiene il testo "AngularJS Tutorial" nella nostra pagina quando viene chiamata la direttiva.
<!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>
Spiegazione del codice
- Stiamo innanzitutto creando un file modulo per la nostra applicazione angolare. Ciò è necessario per creare una direttiva personalizzata poiché la direttiva verrà creata utilizzando questo modulo.
- Stiamo ora creando una direttiva personalizzata chiamata "ngGuru" e definendo una funzione che avrà un codice personalizzato per la nostra direttiva.Nota: - Nota che quando definiamo la direttiva, l'abbiamo definita come ngGuru con la lettera 'G' maiuscola. E quando vi accediamo dal nostro tag div come direttiva, vi accediamo come ng-guru. Ecco come angular interpreta le direttive personalizzate definite in un'applicazione. Innanzitutto il nome della direttiva personalizzata dovrebbe iniziare con le lettere 'ng'. In secondo luogo il simbolo del trattino '-' dovrebbe essere menzionato solo quando si chiama la direttiva. E in terzo luogo la prima lettera che segue le lettere 'ng' quando si definisce la direttiva può essere minuscola o maiuscola.
- Stiamo utilizzando il parametro template che è un parametro definito da Angular per le direttive personalizzate. In questo, stiamo definendo che ogni volta che viene utilizzata questa direttiva, è sufficiente utilizzare il valore del modello e inserirlo nel codice chiamante.
- Qui ora stiamo utilizzando la nostra direttiva “ng-guru” creata su misura. Quando lo facciamo, il valore che abbiamo definito per il nostro modello “ Tutorial su JS angolare " verrà ora iniettato qui.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
L'output soprastante mostra chiaramente che la nostra direttiva ng-guru personalizzata, che ha il modello definito per mostrare un testo personalizzato, viene visualizzata nel browser.
Direttive e ambiti di AngularJs
L'ambito è definito come il collante che lega il controller alla vista gestendo i dati tra la vista e il controller.
Quando si creano direttive AngularJs personalizzate, per impostazione predefinita avranno accesso all'oggetto scope nel controller principale.
In questo modo, diventa facile per la direttiva personalizzata utilizzare i dati trasmessi al titolare del trattamento principale.
Diamo un'occhiata a un esempio di direttiva personalizzata AngularJS su come possiamo utilizzare l'ambito di un controller principale nella nostra direttiva personalizzata.
<!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>
Spiegazione del codice
- Per prima cosa creiamo un controller chiamato "DemoController". In questo, definiamo una variabile chiamata tutorialName e la alleghiamo all'oggetto scope in un'unica istruzione: $scope.tutorialName = "AngularJS".
- Nella nostra direttiva personalizzata, possiamo chiamare la variabile "tutorialName" utilizzando un'espressione. Questa variabile sarebbe accessibile perché è definita nel controller “DemoController”, che diventerebbe il genitore di questa direttiva.
- Facciamo riferimento al controller in un tag div, che fungerà da tag div principale. Tieni presente che questo deve essere fatto prima affinché la nostra direttiva personalizzata possa accedere alla variabile tutorialName.
- Alla fine alleghiamo semplicemente la nostra direttiva personalizzata "ng-guru" al nostro tag div.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
L'output sopra mostra chiaramente che la nostra direttiva personalizzata "ng-guru" utilizza la variabile di ambito tutorialName nel controller principale.
Utilizzo di controller con direttive
Angular offre la possibilità di accedere alla variabile membro del controller direttamente dalle direttive personalizzate senza la necessità dell'oggetto scope.
Ciò diventa necessario a volte perché in un'applicazione potrebbero essere presenti più oggetti ambito appartenenti a più controller.
Quindi c'è un'alta probabilità che tu possa commettere l'errore di accedere all'oggetto scope del controller sbagliato.
In tale scenario esiste un modo per menzionare specificamente la frase "Voglio accedere a questo controller specifico" dalla mia direttiva.
Diamo un'occhiata a un esempio di come possiamo raggiungere questo obiettivo.
<!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>
Spiegazione del codice
- Per prima cosa creiamo un controller chiamato "DemoController". In questo definiremo una variabile chiamata “tutorialName” e questa volta invece di allegarla all'oggetto scope, la allegheremo direttamente al controller.
- Nella nostra direttiva personalizzata, menzioniamo specificamente che vogliamo utilizzare il controller "DemoController" utilizzando la parola chiave del parametro controller.
- Creiamo un riferimento al controller utilizzando il parametro “controllerAs”. Questo è definito da Angular ed è il modo per fare riferimento al controller come riferimento.
- Infine, nel nostro modello, utilizziamo il riferimento creato nel passaggio 3 e la variabile membro collegata direttamente al controller nel passaggio 1.
Nota: -È possibile accedere a più controller in una direttiva specificando i rispettivi blocchi di controller, controllerA e istruzioni template.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
L'output mostra chiaramente che la direttiva personalizzata sta accedendo in particolare al DemoController e alla variabile membro tutorialName ad essa collegata e visualizza il testo "Angular".
Come creare direttive riutilizzabili
Abbiamo già visto il potere delle direttive personalizzate, ma possiamo portarlo al livello successivo costruendo le nostre direttive riutilizzabili.
Diciamo, ad esempio, che volessimo inserire un codice che mostrasse sempre i tag HTML sottostanti su più schermate, che in pratica è solo un input per il "Nome" e l'"età" dell'utente.
Per riutilizzare questa funzione su più schermi senza codificare ogni volta, creiamo un controllo principale o una direttiva in angolare per contenere questi controlli ("Nome" ed "età" dell'utente).
Quindi ora, invece di inserire ogni volta lo stesso codice per la schermata seguente, possiamo effettivamente incorporare questo codice in una direttiva e incorporare quella direttiva in qualsiasi momento.
Vediamo un esempio di come possiamo raggiungere questo obiettivo.
<!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>
Spiegazione del codice
- Nel nostro frammento di codice per una direttiva personalizzata, ciò che cambia è solo il valore assegnato al parametro template della nostra direttiva personalizzata. Invece di un tag o testo del piano cinque, in realtà stiamo inserendo l'intero frammento di 2 controlli di input per " Nome" ed "età" che devono essere mostrati sulla nostra pagina.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'output precedente, possiamo vedere che lo snippet di codice dal modello della direttiva personalizzata viene aggiunto alla pagina.
Direttive e componenti AngularJS – ng-transclude
Come accennato in precedenza, Angular ha lo scopo di estendere le funzionalità di HTML. E abbiamo già visto come possiamo effettuare l'iniezione di codice utilizzando direttive riutilizzabili personalizzate.
Ma nel moderno sviluppo di applicazioni web esiste anche il concetto di sviluppo di componenti web. Ciò significa sostanzialmente creare i nostri tag HTML che possono essere utilizzati come componenti nel nostro codice.
Quindi Angular fornisce un altro livello di potenza per estendere i tag HTML dando la possibilità di inserire attributi nei tag HTML stessi.
Questo viene fatto dal “ng-transclude", che è una sorta di impostazione per dire ad angular di catturare tutto ciò che viene inserito nella direttiva nel markup.
Facciamo un esempio di come possiamo raggiungere questo obiettivo.
<!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>
Spiegazione del codice
- Stiamo utilizzando la direttiva per definire un tag HTML personalizzato chiamato "pane" e aggiungendo una funzione che inserirà del codice personalizzato per questo tag. Nell'output, il nostro tag del riquadro personalizzato visualizzerà il testo "AngularJS" in un rettangolo con un bordo nero continuo.
- L'attributo "transclude" deve essere menzionato come true, cosa richiesta da angular per inserire questo tag nel nostro DOM.
- Nell'ambito, stiamo definendo un attributo titolo. Gli attributi sono normalmente definiti come coppie nome/valore come: name="value". Nel nostro caso, il nome dell'attributo nel tag HTML del nostro riquadro è "titolo". Il simbolo “@” è il requisito di angolare. Questo viene fatto in modo che quando la riga title={{title}} viene eseguita nel passaggio 5, il codice personalizzato per l'attributo title venga aggiunto al tag HTML del riquadro.
- Il codice personalizzato per gli attributi del titolo che disegna semplicemente un bordo nero solido per il nostro controllo.
- Infine, chiameremo il nostro tag HTML personalizzato insieme all'attributo title che è stato definito.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
- L'output mostra chiaramente che l'attributo title del tag html5 del riquadro è stato impostato sul valore personalizzato di "Angular.JS".
Direttive annidate
Le direttive in AngularJS possono essere nidificate. Come solo i moduli o le funzioni interni in any linguaggio di programmazione, potrebbe essere necessario incorporare le direttive l'una nell'altra.
Puoi capirlo meglio vedendo l'esempio seguente.
In questo esempio, stiamo creando 2 direttive chiamate "outer" e "inner".
- La direttiva interna visualizza un testo chiamato "Inner".
- Mentre la direttiva esterna in realtà effettua una chiamata alla direttiva interna per visualizzare il testo chiamato “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>
Spiegazione del codice
- Stiamo creando una direttiva chiamata "esterna" che si comporterà come la nostra direttiva madre. Questa direttiva farà poi appello alla direttiva “interna”.
- La restrizione:'E' è richiesta da angular per garantire che i dati della direttiva interna siano disponibili per la direttiva esterna. La lettera "E" è la forma abbreviata della parola "Elemento".
- Qui stiamo creando la direttiva inner che visualizza il testo "Inner" in un tag div.
- Nel modello per la direttiva esterna (passaggio n. 4), chiamiamo la direttiva interna. Quindi qui stiamo iniettando il modello dalla direttiva interna alla direttiva esterna.
- Infine, richiamiamo direttamente la direttiva esterna.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'uscita,
- Si può vedere che sono state chiamate sia la direttiva esterna che quella interna e viene visualizzato il testo in entrambi i tag div.
Gestire gli eventi in una direttiva
Eventi tali clic del mouse o clic sui pulsanti possono essere gestiti dalle direttive stesse. Questo viene fatto utilizzando la funzione di collegamento. La funzione link è ciò che consente alla direttiva di collegarsi agli elementi DOM in una pagina HTML.
Sintassi:
La sintassi dell'elemento link è quella mostrata di seguito
link: function ($scope, element, attrs)
La funzione di collegamento normalmente accetta 3 parametri incluso l'ambito, l'elemento a cui è associata la direttiva e gli attributi dell'elemento di destinazione.
Diamo un'occhiata a un esempio di come possiamo realizzare questo.
<!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>
Spiegazione del codice
- Stiamo utilizzando la funzione di collegamento come definita in angolare per dare la capacità delle direttive di accedere agli eventi nel DOM HTML.
- Stiamo utilizzando la parola chiave 'element' perché vogliamo rispondere a un evento per un elemento DOM HTML, che nel nostro caso sarà l'elemento “div”. Utilizziamo quindi la funzione "bind" e diciamo che vogliamo aggiungere funzionalità personalizzate all'evento clic dell'elemento. La parola "clic" è la parola chiave utilizzata per denotare l'evento clic di qualsiasi controllo HTML. Ad esempio, il controllo pulsante HTML presenta l'evento click. Poiché, nel nostro esempio, vogliamo aggiungere un codice personalizzato all'evento clic del nostro tag "dev", utilizziamo la parola chiave "click".
- Qui stiamo dicendo che vogliamo sostituire l'HTML interno dell'elemento (nel nostro caso l'elemento div) con il testo 'Mi hai cliccato!'.
- Qui stiamo definendo il nostro tag div per utilizzare la direttiva personalizzata ng-guru.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
- Inizialmente verrà mostrato all'utente il testo 'Click Me' perché questo è quello che è stato inizialmente definito nel tag div. Quando fai effettivamente clic sul tag div, verrà mostrato l'output seguente
Sintesi
- È anche possibile creare una direttiva personalizzata che può essere utilizzata per iniettare codice nell'applicazione angolare principale.
- È possibile creare direttive personalizzate per chiamare i membri definiti nell'oggetto scope in un determinato controller utilizzando le parole chiave "Controller", "controllerAs" e "template".
- Le direttive possono anche essere annidate per fornire funzionalità integrate che potrebbero essere richieste a seconda delle necessità dell'applicazione.
- Le direttive possono anche essere rese riutilizzabili in modo da poter essere utilizzate per inserire codice comune che potrebbe essere richiesto in varie applicazioni web.
- Le direttive possono essere utilizzate anche per creare tag HTML personalizzati con funzionalità definite in base ai requisiti aziendali.
- Gli eventi possono anche essere gestiti dall'interno delle direttive per gestire eventi DOM come clic su pulsanti e mouse.
