Tra le varie opzioni di una direttiva custom in AngularJS, c'è anche quella che ci permette di specificare lo scope. Se non specifichiamo questa opzione, la direttiva prende in input lo scope del suo contenitore. Questo significa che se abbiamo una view che ha uno scope con le proprietà Nome e Cognome, queste proprietà saranno disponibili per default anche nella direttiva.
Sebbene questa funzionalità sia comoda, far utilizzare a una direttiva lo scope del contenitore implica che la direttiva abbia conoscenza del proprio contenitore e per l'incapsulamento questa non è una cosa positiva. La cosa migliore è che la direttiva abbia un proprio scope e che il padre lo valorizzi.
Per fare questo dobbiamo dichiarare le proprietà nello scope come nell'esempio.
.directive('myDir', function () { return { scope:{ Nome: '@Nome', Cognome: '@Cognome' } }; });
A questo punto, Nome e Cognome possono essere impostate tramite attributo nella dichiarazione della direttiva come nel prossimo esempio.
<my-dir nome="{{parentScopeNome}} cognome="{{parentScopeCognome}}"></my-dir>
In questo caso, stiamo impostando le proprieta Nome e Cognome rispettivamente con i valori della proprietà parentScopeNome e parentScopeCognome dello scope contenitore.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Aggiungere interattività lato server in Blazor 8
Load test di ASP.NET Core con k6
Usare lo spread operator con i collection initializer in C#
Generare un hash con SHA-3 in .NET
Evitare la script injection nelle GitHub Actions
Routing statico e PreRendering in una Blazor Web App
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare Tailwind CSS all'interno di React: primi componenti
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Creare un webhook in Azure DevOps
Installare le Web App site extension tramite una pipeline di Azure DevOps