Cos'è la direttiva doganale?
Una direttiva personalizzata in Angular Js è una direttiva definita dall'utente con la funzionalità desiderata. Anche se AngularJS ha molte potenti direttive pronte all'uso, a volte sono necessarie direttive personalizzate.
In questo tutorial imparerai-
- Come creare una direttiva personalizzata?
- Direttive e ambiti di applicazione di AngularJs
- Utilizzo di controller con direttive
- Come creare direttive riutilizzabili
- Direttive e componenti di AngularJS - ng-transclude
- Direttive annidate
- Gestione degli eventi in una direttiva
Come creare una direttiva personalizzata?
Diamo un'occhiata a un esempio di come possiamo creare una direttiva personalizzata.
La direttiva custom nel nostro caso inserirà semplicemente un tag div che ha il testo "AngularJS Tutorial" nella nostra pagina quando viene chiamata la direttiva.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Per prima cosa stiamo creando un modulo per la nostra applicazione angolare. Ciò è necessario per creare una direttiva personalizzata perché 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" come maiuscola. E quando accediamo dal nostro tag div come direttiva, accediamo come ng-guru. Questo è il modo in cui angular comprende 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. In terzo luogo, la prima lettera che segue le lettere "ng" quando si definisce la direttiva può essere minuscola o maiuscola.
- Stiamo usando 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, quindi utilizzare semplicemente il valore del modello e iniettarlo nel codice chiamante.
- Qui stiamo ora facendo uso della nostra direttiva "ng-guru" creata su misura. Quando lo facciamo, il valore che abbiamo definito per il nostro modello "Angular JS Tutorial" verrà ora inserito qui.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
- L'output sopra 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 applicazione di AngularJs
L'ambito è definito come il collante che lega il controller alla visualizzazione gestendo i dati tra la visualizzazione e il controller.
Quando si creano direttive AngularJs personalizzate, per impostazione predefinita avranno accesso all'oggetto scope nel controller padre.
In questo modo, diventa facile per la direttiva custom utilizzare i dati passati al controller principale.
Diamo un'occhiata a un esempio di come possiamo utilizzare l'ambito di un controllore padre nella nostra direttiva personalizzata.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Per prima cosa creiamo un controller chiamato "DemoController". In questo, definiamo una variabile chiamata tutorialName e la colleghiamo all'oggetto scope in un'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 per questa direttiva.
- Facciamo riferimento al controller in un tag div, che fungerà da tag div genitore. Nota che questo deve essere fatto prima affinché la nostra direttiva personalizzata possa accedere alla variabile tutorialName.
- Infine, colleghiamo semplicemente la nostra direttiva personalizzata "ng-guru" al nostro tag div.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
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.
A volte questo diventa necessario perché in un'applicazione si possono avere più oggetti di ambito appartenenti a più controller.
Quindi c'è un'alta probabilità che tu possa commettere l'errore di accedere all'oggetto dell'ambito del controller sbagliato.
In tale scenario c'è 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 ottenere questo risultato.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Per prima cosa creiamo un controller chiamato "DemoController". In questo definiremo una variabile chiamata "tutorialName" e questa volta invece di collegarla all'oggetto scope, la collegheremo direttamente al controller.
- Nella nostra direttiva personalizzata, stiamo specificatamente menzionando 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.
Nota: - È possibile accedere a più controller in una direttiva specificando i rispettivi blocchi delle istruzioni controller, controllerAs e template.
- Infine, nel nostro modello, stiamo usando il riferimento creato nel passaggio 3 e utilizzando la variabile membro che è stata collegata direttamente al controller nel passaggio 1.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
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 a un livello superiore creando le nostre direttive riutilizzabili.
Diciamo, ad esempio, che volevamo iniettare codice che mostrasse sempre i tag HTML sottostanti su più schermi, che è fondamentalmente solo un input per il "Nome" e "l'età" dell'utente.
Per riutilizzare questa funzione su più schermate senza codificare ogni volta, creiamo un controllo principale o una direttiva angolare per contenere questi controlli ("Nome" e "età" dell'utente).
Quindi ora, invece di inserire ogni volta lo stesso codice per la schermata sottostante, possiamo effettivamente incorporare questo codice in una direttiva e incorporare quella direttiva in qualsiasi momento.
Vediamo un esempio di come possiamo ottenere questo risultato.
Event Registration Guru99 Global Event
Spiegazione del codice:
- Nel nostro frammento di codice per una direttiva personalizzata, ciò che cambia è solo il valore che viene dato al parametro modello della nostra direttiva personalizzata.
Invece di un tag o di un testo del piano cinque, stiamo effettivamente inserendo l'intero frammento di 2 controlli di input per il "Nome" e l '"età" che devono essere mostrati sulla nostra pagina.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
Produzione:
Dall'output precedente, possiamo vedere che lo snippet di codice dal modello della direttiva personalizzata viene aggiunto alla pagina.
Direttive e componenti di AngularJS - ng-transclude
Come accennato in precedenza, Angular ha lo scopo di estendere le funzionalità di HTML. E abbiamo già visto come possiamo avere l'iniezione di codice usando direttive riutilizzabili personalizzate.
Ma nello sviluppo di applicazioni web moderne, esiste anche il concetto di sviluppare componenti web. Che fondamentalmente significa creare i nostri tag HTML che possono essere utilizzati come componenti nel nostro codice.
Quindi angular fornisce un altro livello di potenza all'estensione dei tag HTML dando la possibilità di iniettare attributi nei tag HTML stessi.
Questo viene fatto dal tag " 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 ottenere questo risultato.
Event Registration Guru99 Global Event
Angular JS
Spiegazione del codice:
- Stiamo usando la direttiva per definire un tag HTML personalizzato chiamato "riquadro" e aggiungendo una funzione che inserirà del codice personalizzato per questo tag. Nell'output, il nostro tag del riquadro personalizzato mostrerà il testo "AngularJS" in un rettangolo con un bordo nero pieno.
- L'attributo "transclude" deve essere menzionato come vero, che è richiesto da angular per iniettare questo tag nel nostro DOM.
- Nell'ambito, stiamo definendo un attributo del titolo. Gli attributi sono normalmente definiti come coppie nome / valore come: nome = "valore". Nel nostro caso, il nome dell'attributo nel tag HTML del riquadro è "titolo". Il simbolo "@" è il requisito da angolare. Questo viene fatto in modo che quando la riga title = {{title}} viene eseguita nel passaggio 5, il codice personalizzato per l'attributo title viene aggiunto al tag HTML del riquadro.
- Il codice personalizzato per gli attributi del titolo che disegna solo un bordo nero pieno per il nostro controllo.
- Infine, stiamo chiamando il nostro tag HTML personalizzato insieme all'attributo title che è stato definito.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.
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 angolare possono essere annidate. Come solo i moduli interni o le funzioni in qualsiasi linguaggio di programmazione, potrebbe essere necessario incorporare le direttive l'una nell'altra.
Puoi capire meglio questo aspetto guardando l'esempio di seguito.
In questo esempio, creiamo 2 direttive chiamate "esterno" e "interno".
- La direttiva interna mostra un testo chiamato "Inner".
- Mentre la direttiva esterna effettua effettivamente una chiamata alla direttiva interna per visualizzare il testo chiamato "Inner".
Guru99 Global Event