Direttive 2276 Visite) AngularJs
In AngularJS le direttive sono, di fatto, gli elementi base del Framework.
Ogni volta che fate un data-ng-bind o un data-ng-controller, state utilizzando una direttiva.
Oltre alle direttive definite all'interno della libreria é possibile definire proprie direttive, dalle più semplici (uno snippet che mostra le informazioni di un utente), a quelle più complesse (interi controlli con tanto di logica interna).
Potete quindi vederli come controlli, con un loro codice HTML, proprietà, eventi ed uno scope.
Creiamo una direttiva base che mostri le informazioni nome e cognome di un utente all’interno di un div
app.directive('user', function () {
return {
transclude:true,
template: "<div>Name:{{name}} Surname:{{ surname}}</div>",
}
});
La direttiva è una funzione che restituisce un set di proprietà. Quella fondamentale è template, ossia il codice HTML da generare (potete utilizzare templateurl per indicare un percorso da cui reperire l’html)
Utilizzandolo all’interno di un controller
<div data-user=""></div>
Questi sostituirà il vostro tag con quello del template. Notate che ho utilizzato il tag data-user e che la direttiva è stata definita come user. Potete anche utilizzare <user></user> ed AngularJs individuerà la posizione dell’oggetto.
Avendo attenzione che combacino le variabili ed i metodi definiti nello scope del controller, la vostra direttiva potrà diventare un elemento con cui velocizzare la creazione delle vostre maschere. La proprietà transclude indica che la direttiva potrà accedere alle informazioni dello scope dell’oggetto che la ospita.
Fin qui, tuttavia, sarebbe un po’ riduttivo. Le direttive diventano interessanti quando sono perfettamente indipendenti. Creiamo quindi una direttiva con un proprio scope e delle proprie caratteristiche.
app.directive('user', function () {
return {
transclude:true,
scope: { data: "=info" },
template: "<div>Name:{{data.name}} Surname:{{data.surname}}<input value='press' type='button' data-ng-click='press()'/></div>",
link: function (scope) {
scope.press = function () {
alert('hello ' + scope.data.name + ' ' + scope.data.surname);
}
}
};
});
In questa direttiva è stato definito uno scope con una proprietà data. Notare che la data è stata posta come uguale a =info. Utilizzandola così
<div data-user="" data-info="item"></div>
Farete in modo che l’oggetto item assegnato a data-info arrivi alla variabile data nello scope.
La proprietà link descrive il funzionamento dell’oggetto, come se fosse un controller. Avete lo scope della direttiva a cui aggiungere variabili e metodi che interagiranno con lo scope definito nella direttiva. Passando a link una funzione con 2 parametri
link: function (scope,element)
utilizzerete il secondo per gestire il tag html (più avanti verrà fatta una panoramica di come utilizzare element).
E se voglio raggiungere lo scope del controller in cui si trova la direttiva?
Scope.$parent
- Directive.html 2 KB) Download File