Negli script precedenti abbiamo analizzato le direttive built-in più usate in AngularJS. Sebene queste direttive coprano le esigenze più comuni, a volte non sono sufficienti a coprire scenari più complessi necessari per la nostra applicazione. In questi casi dobbiamo ricorrere alla creazione di una direttiva custom.
Creare una direttiva custom con AngularJS può essere estremamente semplice o estremamente complicato a seconda di quello che si deve fare. In questo esempio vedremo come creare una direttiva che mostra un semplice tag HTML.
var app = angular.module("myApp", []); app.directive("My-Directive", function() { return { template : "<h1>Direttiva</h1>" }; });
Il primo passo consiste nel creare il modulo per poi creare al suo interno la direttiva. La direttiva si crea con il metodo directive chiamato direttametnte sul modulo. Al metodo directive passiamo il nome della direttiva e una funzione che ritorna l'oggetto che rappresenta il codice della direttiva. Nella forma più semplice, l'oggetto ha una proprietà template che specifica il codice HTML che la direttiva deve mostrare. Vediamo ora come usare la direttiva nel codice HTML.
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <body ng-app="myApp"> <my-directive></my-directive> </body> </html>
Come si vede, basta inserire il nome della direttiva come se fosse un normale tag HTML e Angular la tradurrà in automatico per noi.
Il motore delle direttive permette di eseguire operazioni molto più complesse che mostrare un tag HTML. Nei prossimi script vedremo come sfruttare altre funzionalità del motore.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Disabilitare automaticamente un workflow di GitHub
Sostituire la GitHub Action di login su private registry
Hosting di componenti WebAssembly in un'applicazione Blazor static
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Utilizzare database e servizi con gli add-on di Container App
Come migrare da una form non tipizzata a una form tipizzata in Angular
Assegnare un valore di default a un parametro di una lambda in C#
Usare un KeyedService di default in ASP.NET Core 8
Reactive form tipizzati con modellazione del FormBuilder in Angular
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Utilizzare gli snapshot con Azure File shares
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Estrarre dati randomici da una lista di oggetti in C#
- Utilizzare un DataContext specifico per la modalità design time di Blend e Visual Studio nei controlli Silverlight
- Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps