CommitUniversity AngularJSAdvanced Andrea Vallotti

Editor's Notes

• #11: priority è un numero, le direttive con priority maggiore vengono eseguite prima a parità di priority l’ordine è indeterminato priority di default è zero, alcune direttive che la cambiano sono: ng-disabled (100), ng-controller (500), ng-include (400), etc. terminal deve essere usato in congiunzione con priority require è ideale per la comunicazione tra direttive, che vedremo dopo, e possibile specificare una o più direttive (utilizzando un array). ? vuol dire che è opzionale, ^ vuol dire che la direttiva può essere su un elemento contenitore. Esempio menuDirective.js
• #12: la costruzione è invocata una volta sola durante il ciclo di vita dell’applicazione. Volendo far vedere il codice della slide #5 per far capite cos’è la costruzione scope e controller vengono creati solo se necessario; pre-linking → link allo scope prima della compilazione/linking dei figli post-linking → link allo scope dopo la compilazione/linking dei figli Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso;
• #13: Le direttive di default condividono lo scope del controller che le contiene true → se ci sono più direttive sullo stesso elemento che richiedono un nuovo scope con true allora AngularJS ne crea uno solo condiviso fra tutte deriva prototipicamente gli scope isolati sono scope che non partecipano alla normale eriditarietà prototipale degli scope di AngularJS uno scope isolato “vuoto” non contiene nulla se non ciò che ci viene messo dalla direttiva
• #14: gli scope isolati sono fondamentali per evitare che una direttiva possa interferire in alcun modo con il comportamento del controller o di altre direttive il valore di un attributo del DOM è sicuramente una stringa quindi il binding @darà sempre una stringa con il binding = il ? serve per dire che non è obbligatorio che l’attributo ci sia, di default è obbligatorio il binding & è perfetto stabilire una comunicazione fra direttiva e controller (nel verso opposto basta usare un binding :-) ). Vedi ui-bootstrap.js riga 2876 VEDERE ESEMPIO LIVE SUL BROWSER
• #15: ideali per concentrare tutta la logica della direttiva e per contenere variabili che non devono essere esposte sullo scope per il binding $transclude è la stessa funzione che viene passata ai metodi di link, dato che non è consigliabile manipolare il DOM dal controller meglio non usarla
• #16: scope: è lo scope della direttiva (lo stesso del controller) iElement: è [il clone] del template iAttrs: è la lista “normalizzata” (cioè con i nomi in camel case) degli attributi presenti sull’elemento. E’ condiviso da tutte le direttive presenti su un elemento controller: è il controller della direttiva o una lista di controller se è stato utilizzata l’opzione require transcludeFn: è una funzione che consente di clonare e linkare il template per poi inserirlo nel DOM Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso; pre: dato che viene eseguita prima che i figli siano stati linkati è meglio evitare di manipolare il DOM. Deve essere usata solo per lavori preparatori o attività che non riguardano il DOM ma che comunque sono relative all’istanza specifico del DOM e non al template. E.g. direttiva form in angular.js alla riga 16345
• #17: eseguita dopo che il template è stato clonato esempio completo vedere cmswSpinnerDirective.js
• #18: in questo esempio è stato utilizzato anche l’attributo replace per sostituire il template della direttiva al posto dell’HTML originale il contenuto di una direttiva che ha transclude a true non fa riferimento allo scope della direttiva (anche se vi è contenuto nell’albero HTML) ma fa riferimento allo scope subito fuori dalla direttiva
• #19: Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso; vedere come esempio ngRepeat in angular.js alla riga 20393 - 20404
• #20: della funzione/oggetto di link se ne parla dopo migliora le performance perché se la nostra direttiva è utilizzata insieme, ad esempio, ad ng-repeat le operazione fatte nella funzione compile verranno effettuate una volta sola ngCloak si autoelimina dal proprio template nella funzione compile (angular.js riga 18624) se viene dichiarata la funzione compile non può essere dichiarata la funzione/oggetto link, quest’ultimo deve essere ritornato eventualmente dalla funzione compile Direttive con priority maggiore vengono compilate per prime. Le funzioni di pre-link sono invocate nello stesso ordine mentre le funzioni di post-link vengono eseguite in ordine inverso