Direttiva personalizzata di AngularJS: modelli, ambito e transclusione

Che cos'è una direttiva personalizzata in AngularJS?

A Direttiva doganale In AngularJS è una direttiva definita dall'utente che estende HTML con il comportamento che scrivi tu stesso. È registrata su un modulo utilizzando la funzione “directive”, e AngularJS la allega ovunque l’elemento o l’attributo corrispondente appaia nella pagina. Anche se AngularJS ha molte potenti Direttive integrate fuori dagli schemi, come ad esempio ng-ripetere, a volte sono necessarie direttive personalizzate.

⚠️ Correzione: La versione originale affermava che una direttiva personalizzata "sostituisce l'elemento per cui viene utilizzata". Di default, ciò non avviene: template è inserito interno l'elemento corrispondente. Necessità di sostituzione replace: true, obsoleto a partire da AngularJS 1.3.

⚠️ Avviso di assistenza: AngularJS ha raggiunto Fine della vita il 31 dicembre 2021 e non riceve ulteriori patch o correzioni di sicurezza. Tutto quanto segue rimane valido per la manutenzione del codice AngularJS 1.x esistente; nelle versioni moderne di Angular gli equivalenti sono i componenti e le direttive di attributo.

Il motivo per cui si ricorre a una direttiva personalizzata è la ripetizione. Quando lo stesso markup o lo stesso collegamento DOM appare su più schermate, una direttiva lo trasforma in un unico tag denominato.

Come creare una direttiva personalizzata?

Vediamo un esempio di come creare una direttiva personalizzata in AngularJS.

Nel nostro caso, la direttiva personalizzata si limiterà a inserire un tag div con il testo "Angular JS Tutorial" nella nostra pagina quando la direttiva viene richiamata.

La schermata annotata qui sotto numera le quattro parti dell'elenco, che verranno spiegate in seguito.

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

⚠️ Attenzione: in questo elenco sono presenti alcuni difetti. Il codice è riprodotto esattamente come pubblicato. Tre errori si ripresentano in ogni listato qui riportato: chrset="UTF 8" dovrebbe essere charset="UTF-8"; angular.js and angular.min.js entrambi vengono caricati, quindi AngularJS viene caricato due volte; e angular-route.js viene caricato prima del file da cui dipende.

Code Spiegazione

1. Stiamo innanzitutto creando un file modulo per la nostra applicazione AngularJS. Ciò è necessario per creare una direttiva personalizzata, poiché la direttiva verrà creata utilizzando questo modulo.
2. Stiamo creando una direttiva personalizzata chiamata “ngGuru"e definendo una funzione factory che conterrà il codice personalizzato per la nostra direttiva.
3. Stiamo utilizzando il parametro template, che è un parametro definito da AngularJS per le direttive personalizzate. In questo modo, definiamo che ogni volta che questa direttiva viene utilizzata, allora viene semplicemente utilizzato il valore del template e iniettato nel codice chiamante.
4. Qui stiamo ora utilizzando la nostra direttiva "ng-guru" creata su misura. Quando lo facciamo, il valore che abbiamo definito per il nostro modello, <div>Angular JS Tutorial</div>, verrà ora iniettato qui.

Denominazione e normalizzazione delle direttive

La mancata corrispondenza del nome tra il JavaLo script e l'HTML confondono la maggior parte dei principianti. AngularJS normalizza ogni elemento e nome di attributo prima di corrisponderlo: rimuove qualsiasi x- or data- prefisso, quindi converte un nome delimitato da -, : or _ in camelCase. Ecco perché ngGuru fiammiferi ng-guru, e perché data-ng-guru Funziona anche quello. Il nome corretto è camelCase; kebab-case è semplicemente il modo in cui viene scritto in HTML.

⚠️ Correzione: Il testo originale diceva che il nome di una direttiva personalizzata “dovrebbe iniziare con le lettere 'ng'”. documentazione ufficiale di AngularJS consiglia il contrario: non anteporre mai alle proprie direttive il prefisso ng, oppure potrebbero entrare in conflitto con un futuro componente incorporato. Usa il tuo prefisso, come g99Guru scritto come g99-guru.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

L'output mostra chiaramente che la nostra direttiva ng-guru personalizzata, che ha il template definito per visualizzare un testo personalizzato, viene visualizzata nel browser. Il passo successivo è inserire qualcosa di riutilizzabile all'interno di quel template.

Come creare direttive riutilizzabili

Abbiamo già visto il potere delle direttive personalizzate, ma possiamo portarlo al livello successivo costruendo le nostre direttive riutilizzabili.

Supponiamo, ad esempio, di voler inserire del codice che visualizzi sempre i seguenti tag HTML su più schermate, che in pratica consistono semplicemente in un campo di input per il "Nome" e l'"età" dell'utente.

Per riutilizzare questo frammento su più schermate senza doverlo codificare ogni volta, creiamo un controllo principale, o direttiva, in AngularJS per contenere questi due controlli.

Quindi ora, invece di ripetere quel markup su ogni schermata, lo incorporiamo in una direttiva e richiamiamo quest'ultima. Lo screenshot qui sotto evidenzia l'unica riga che cambia.

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

Code Spiegazione

• Nel nostro frammento di codice per una direttiva personalizzata, ciò che cambia è solo il valore assegnato al parametro del template. Invece di un semplice tag o di una riga di testo, inseriamo l'intero frammento di due controlli di input per "Nome" ed "Età" che devono essere visualizzati nella nostra pagina.

💡 Suggerimento: Un modello così lungo dovrebbe trovarsi in un file separato. Scambia template per templateUrl: 'name-age.html'.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

Dall'output sopra riportato, possiamo vedere che il frammento di codice del template della direttiva personalizzata viene aggiunto alla pagina. Il template è ancora statico, quindi il passo successivo è quello di alimentarlo con i dati.

Direttive e ambiti di AngularJS

Migliori portata viene 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, queste avranno per impostazione predefinita accesso all'oggetto scope del controller padre. Si tratta dello stesso oggetto scope, non di una copia.

In questo modo, diventa facile per la direttiva personalizzata utilizzare i dati trasmessi al titolare del trattamento principale.

Vediamo un esempio di come possiamo utilizzare lo scope di un controller padre nella nostra direttiva personalizzata. Lo screenshot qui sotto numera i quattro passaggi.

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

1. Per prima cosa creiamo un controller chiamato "DemoController". In questo, definiamo una variabile chiamata tutorialName e la colleghiamo all'oggetto scope in un'unica istruzione: $scope.tutorialName = "Angular JS".
2. 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.
3. 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.
4. Alla fine alleghiamo semplicemente la nostra direttiva personalizzata "ng-guru" al nostro tag div.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

L'output sopra riportato mostra chiaramente che la nostra direttiva personalizzata "ng-guru" utilizza la variabile di scope tutorialName nel controller padre. Condividere lo scope del padre è comodo, ma non sempre è la soluzione ideale.

Utilizzo dei controller con direttive

AngularJS offre la possibilità di accedere alla variabile membro del controller direttamente dalle direttive personalizzate senza la necessità dell'oggetto scope.

Ciò si rende talvolta necessario perché un'applicazione può avere più oggetti scope appartenenti a più controller, quindi c'è un'alta probabilità di accedere per errore all'oggetto scope del controller sbagliato.

In uno scenario del genere, esiste un modo per specificare esplicitamente "Voglio accedere a questo controller" tramite la mia direttiva.

Vediamo un esempio di come possiamo raggiungere questo obiettivo. La schermata numera i quattro passaggi.

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

1. Innanzitutto creiamo un controller chiamato "DemoController". In questo controller definiremo una variabile chiamata "tutorialName" e, questa volta, invece di collegarla all'oggetto scope, la collegheremo direttamente al controller.
2. Nella nostra direttiva personalizzata, menzioniamo specificamente che vogliamo utilizzare il controller "DemoController" utilizzando la parola chiave del parametro controller.
3. Creiamo un riferimento al controller utilizzando il parametro "controllerAs". Questo parametro è definito da AngularJS ed è il modo per fare riferimento al controller tramite un alias.
4. Infine, nel nostro template, utilizziamo il riferimento creato al passaggio 3 e la variabile membro che è stata collegata direttamente al controller al passaggio 1.

Nota: È possibile accedere a più controller in una direttiva specificando i rispettivi blocchi del controller, controllerAs e istruzioni template. Per raggiungere un genitore controller della direttiva invece, usa require.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

L'output mostra chiaramente che la direttiva personalizzata accede al DemoController e alla variabile membro tutorialName ad esso associata, e visualizza il testo "Angular". Entrambi gli approcci leggono ancora da uno scope condiviso, cosa che uno scope isolato impedisce.

In che modo le associazioni @, =, & e < differiscono in un ambito isolato

Una direttiva che condivide l'ambito del suo genitore può essere utilizzata solo una volta per controller, perché due copie entrerebbero in conflitto per le stesse variabili. scope l'oggetto crea un ambito isolatoLa direttiva non vede nulla all'esterno, a parte le proprietà che elenchi. Ogni voce utilizza un simbolo di prefisso che dichiara come viene propagato il suo valore.

💡 Suggerimento: Raggiungere < prima =Il binding unidirezionale è più economico da monitorare e impedisce a un componente di modificare silenziosamente i dati del chiamante. La sezione successiva utilizza @.

Direttive e componenti di AngularJS: ng-transclude

Come accennato in precedenza, AngularJS è pensato per estendere la funzionalità di HTML. E abbiamo già visto come possiamo effettuare l'iniezione di codice utilizzando direttive riutilizzabili personalizzate.

Ma nello sviluppo moderno di applicazioni web, esiste anche un concetto di sviluppoping componenti web, che in pratica significa creare i nostri tag HTML che possono essere utilizzati come componenti nel nostro codice.

Pertanto, AngularJS offre un ulteriore livello di potenza per estendere i tag HTML, consentendo di racchiudere qualsiasi markup inserito dall'utente all'interno del tag.

Questo viene fatto dal “ng-transcludedirettiva ", che indica ad AngularJS di catturare tutto ciò che viene inserito all'interno del tag personalizzato nel markup e di inserirlo nel template in quel punto.

Facciamo un esempio di come possiamo raggiungere questo obiettivo. Lo screenshot numera i cinque punti che seguono.

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

1. Utilizziamo la direttiva per definire un tag HTML personalizzato chiamato "pane", con una funzione factory che ne fornisce il codice. Nell'output, il tag pane visualizza il testo "Angular JS" in un rettangolo con un bordo nero pieno.
2. La proprietà “transclude” deve essere impostata su true, che è ciò che dice ad AngularJS di mantenere il markup interno originale e renderlo disponibile a ng-transclude.
3. Nell'oggetto scope stiamo dichiarando un binding del titolo. Gli attributi sono normalmente scritti come coppie nome/valore come name="value"Nel nostro caso, l'attributo del tag pane è "title" e il simbolo "@" indica ad AngularJS di copiare tale attributo come stringa interpolata.
4. Il modello disegna un bordo nero pieno per il nostro controllo e contrassegna il punto in cui viene inserito il markup transcluso.
5. Infine, richiamiamo il nostro tag HTML personalizzato insieme all'attributo title che è stato definito.

⚠️ Correzione: Il testo originale descriveva “@” come “il requisito di Angular”. Non si tratta di una formalità: @ è uno dei quattro simboli di binding isolate-scope nella tabella sopra e produce sempre una stringa. Questo modello non viene mai renderizzato {{title}}e nessun controller definisce title, quindi è visibile solo il testo transcluso.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

• L'output mostra l'elemento del pannello personalizzato visualizzato come una casella con bordo contenente il testo transcluso "Angular JS".

Una direttiva può anche contenere altre direttive, ed è così che vengono assemblati componenti più complessi.

Direttive annidate

Le direttive in AngularJS possono essere annidate. Come moduli interni o funzioni in qualsiasi 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”.

Lo screenshot qui sotto evidenzia entrambe le definizioni delle direttive e il punto in cui una richiama l'altra.

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

⚠️ Attenzione: questo articolo presenta un difetto. L'elenco pubblicato inizia a </head>, manca la sua apertura <!DOCTYPE html>, <html> and <head> righe. Aggiungile prima di eseguirlo.

Code Spiegazione

1. Stiamo creando una direttiva chiamata "esterna" che si comporterà come la nostra direttiva madre. Questa direttiva farà poi appello alla direttiva “interna”.
2. Migliori restrict:'E' l'opzione indica ad AngularJS di abbinare ogni direttiva tramite elemento nome, ed è per questo che possono essere scritti come tag <outer> and <inner>La lettera 'E' è l'abbreviazione della parola 'Elemento'.
3. Qui stiamo creando la direttiva inner che visualizza il testo "Inner" in un tag div.
4. Nel template della direttiva esterna, richiamiamo la direttiva interna. Quindi, qui stiamo iniettando il template dalla direttiva interna nella direttiva esterna.
5. Infine, richiamiamo direttamente la direttiva esterna.

⚠️ Correzione: Il testo originale affermava restrict:'E' è richiesto “per garantire che i dati della direttiva interna siano disponibili alla direttiva esterna”. Non fa nulla del genere; controlla soltanto come È possibile scrivere una direttiva. L'annidamento funziona perché il compilatore continua a entrare nel modello appena inserito. Per condividere i dati, utilizzare require and controller.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

Dall'uscita,

• Si può notare che entrambe le direttive, esterna e interna, sono state richiamate e il testo contenuto in entrambi i tag div viene visualizzato.

Il rendering del markup è solo metà del lavoro di una direttiva; l'altra metà consiste nel reagire all'utente.

Gestione degli eventi in una direttiva

Eventi Eventi come i clic del mouse o dei pulsanti possono essere gestiti direttamente all'interno delle direttive. Ciò avviene tramite la funzione `link`. La funzione `link` permette alla direttiva di collegarsi agli elementi DOM di una pagina HTML.

Sintassi:

La sintassi della funzione di collegamento è la seguente.

link: function ($scope, element, attrs)

La funzione link accetta normalmente 3 parametri: l'ambito, l'elemento a cui è associata la direttiva e gli attributi dell'elemento di destinazione. Altri due parametri, un controller obbligatorio e una funzione di transclusione, vengono aggiunti quando vengono applicati.

Fase di compilazione contro fase di collegamento

AngularJS elabora una direttiva in due passaggi, e sapere quale sia quale permette di capire dove va inserito il codice.

• Compilare Viene eseguito una sola volta sull'elemento template, prima che esista qualsiasi ambito. È adatto alle modifiche strutturali condivise da ogni clone.
• vetro Viene eseguito una sola volta per istanza, dopo che il template è stato clonato e uno scope è stato associato. I listener DOM e le letture dello scope appartengono a questo contesto.

Poiché compile non ha ambito, tutto ciò che necessita di dati appartiene a link, ed è per questo che l'esempio seguente definisce link da solo.

Vediamo un esempio di come possiamo raggiungere questo obiettivo. La schermata numera i quattro punti seguenti.

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

1. Utilizziamo la funzione link, come definita in AngularJS, per consentire alla direttiva di accedere agli eventi nel DOM HTML.
2. Utilizziamo la parola chiave 'element' perché vogliamo rispondere a un evento di un elemento DOM HTML, che nel nostro caso è l'elemento "div". Utilizziamo quindi la funzione "bind" per aggiungere funzionalità personalizzate all'evento click dell'elemento. La parola chiave 'click' viene utilizzata per indicare l'evento click di qualsiasi controllo HTML.
3. Qui stiamo dicendo che vogliamo sostituire l'HTML interno dell'elemento, nel nostro caso l'elemento div, con il testo 'Hai cliccato su di me'.
4. Qui stiamo definendo il nostro tag div per utilizzare la direttiva personalizzata ng-guru.

💡 Suggerimento: Una direttiva dovrebbe pulire dopo di sé. Rimuovere qualsiasi listener che sopravvive all'elemento al suo interno element.on('$destroy', ...)oppure la pagina presenta una perdita di memoria.

Se il codice viene eseguito correttamente, viene visualizzato questo output.

Produzione:

• Inizialmente, all'utente viene mostrato il testo "Clicca qui", perché è quello definito all'interno del tag div. Quando si fa clic sul tag div, viene visualizzato il risultato seguente.

Ogni esempio sopra ha utilizzato una o due proprietà dello stesso oggetto di definizione. Vale la pena conservare l'insieme completoping a portata di mano.

Riferimento alle proprietà dell'oggetto di definizione della direttiva

L'oggetto restituito da una factory di direttive è il Definizione direttiva OggettoCiascuna proprietà risponde a una domanda sul comportamento della direttiva.

💡 Suggerimento: Inizia con restrict, template and link. Inserisci scope per il riutilizzo, controller and require per le chiamate da direttiva a direttiva e lasciare priority and terminal da solo.

DOMANDE FREQUENTI