DirectivasenAngularJS

@gruizdevilla@adesis

MeetupAngularJSMadridPuedesencontrarlosejemplosdelacharlaen:https://github.com/gonzaloruizdevilla/directivas

¿Quéesunadirectiva?

EsunmarcadorsobreunelementodeDOM,comounatributo,unelementoounaclaseCSS.LeindicaalcompiladordeHTMLdeAngularJS($compile)queengancheuncomportamientoespecíficoy/otransformealelementooasusdescendientes.

jQueryyAngularJS(sobremanipulacióndeDOMen

general)

SolohayUNSITIO*dondeeslegítimomanipulardirectamenteelDOM(conjQuery,zepto,directamente,etc.):

LASDIRECTIVASSilohacesenotrositio,loestáshaciendoMAL.

*Ytalvezunservicio,perosoloparalosqueREALMENTEsabenloqueestánhaciendo.Porej:https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js#L109

Unejemplosencillo:chispas

Miprimeradirectiva.directive('chispas',function(){return{restrict:'E',link:functionpostLink(scope,element){element.text('Miprimeradirectiva:chispas');}};});

Estilosdedeclaración:EACM

E:ElementoA:AtributoC:ClaseCSSM:Comentario

LasrecomendadassonEA.ElvalorpordefectoesA.

Lafunción"link"

DonderegistramoseventosymanipulamoselDOM.

SeejecutaDESPUÉSdehaberclonadoelDOM(unavezporinstanciadeladirectiva)

Laplantillasecompilaconelscopequerecibelafunciónlink

.directive('reloj',function(){return{template:'<div>Hora:{{hora|date:\'h:mm:ssa\'}}</div>',restrict:'E',link:functionpostLink(scope){scope.hora=newDate();}};});

HayquemantenerAngularJSalcorrientedeloscambiosdescopeMediante$apply,$digestoenelcontextodeunaejecuciónde

AngularJS

.directive('reloj2',function(){return{template:'<div>Hora:{{hora|date:\'h:mm:ssa\'}}<button>Actualizar</button></div>',restrict:'E',link:functionpostLink(scope,element){scope.hora=newDate();element.find('button').click(function(){scope.$apply(function(){scope.hora=newDate();});});}};});

MediantelapropiedadtemplateUrlseparamoshtmlyJavaScript

.directive('reloj3',function(){return{templateUrl:'templates/reloj3.html',restrict:'E',link:functionpostLink(scope,element){scope.hora=newDate();element.find('button').click(function(){scope.$apply(function(){scope.hora=newDate();});});}};});

Controladores:paranoreinventarlarueda

PodemosextraerpartedelalógicaauncontroladortradicionaldeAngularJS

.controller('RuedaCtrl',function($scope){$scope.rotating=false;$scope.toggle=function(){$scope.rotating=!$scope.rotating;};}).directive('rueda',function(){return{templateUrl:'templates/rueda.html',controller:'RuedaCtrl',restrict:'E',link:functionpostLink(){}};});

Comunicándoseconelexterior

Ladirectivapuedecomunicarconelexterior:

1. Atravésdelscope2. Medianteatributos

Lasegundaopciónsuelesermejor,aunquesiemprehayexcepciones.

UsandoelScope

Comoocurreenloscontroladores,elscopesecopiapordefecto:

lostiposbásicosporvalorlosobjetosporreferencia

Puedeserlegítimoleerdelscopedelpadre,peromanipularlosobjetosquehayenelesotrotema,puespodríamosviolarel

PrincipiodelaMínimaSorpresa.

Usandoatributos.

Eslamejormanera.Convieneempezaraislándosedelscopepadre

.directive('miDirectiva',function(){return{//...scope:{},//...}})

Aldefinirunscope:{},ladirectivatendráunscopelimpio,quenoheredarálaspropiedadesdelscopedelcontenedor.

Tresformasdecomunicación:

.directive('miDirectiva',function(){return{//...scope:{"a":"@","b1":"@b2","c":"=","d1":"=d2","e":"&","f1":"&f2"},//...},})

Laprimeraforma:@o@attr

Pista:arrobaes"at",comodeatributo.Serecibeelvalordelatributo,esdecir,siesdelaforma:

<midirectivamiatributo='algoPasaCon{{nombre}}'/>

yenelcontenedor

$scope.nombre='Mary'

entoncesenladirectiva,elscopelocaltendrá

scope.miatributo='algoPasaConMary'

Lasegundaforma:=o=attr

Pista:igual.Elscopelocalconelpadre.

Creaunbindbidireccionalentrelapropiedaddelscopelocalylaquesehayareferenciadoenelpadre.

<midirectivamiatributo='propiedadP'/>

yenelcontenedor

$scope.propiedadP='Yosoytupadre'

entoncesenladirectiva,elscopelocaltendrá

scope.miatributo=='Yosoytupadre'//elvalordepropiedadPenelscopedelpadre,siempreactualizado

Laterceraforma:&o&attr

Pista:&escomounpunteroenC.Devuelveunafunción.

Devuelveunafunciónqueejecutarálaexpresióndelatributocontraelscopedelpadre.Elscopesepuede

extenderenelmomentodelaejecuciónconvaloresadicionales.

Unejemplohabitualesng-click.

"Transclusion",elpalabromásraro(Loquevieneaser<content>enwebcomponents).

Hayqueactivarlatransclusión:

.directive('midirectiva',function(){return{//...transclude:true,//..};});

Yluegousar:

ng-transclude

EstadirectivamarcaelpuntodeinsercióndelDOMdeladirectivapadremáscercanaquetengaactivadalatransclusión.

Interaccióndeformularios:ngModel.ngModelController

LasventajasdengModel:

$setViewValue:parainformardeunnuevovalor,reaccionandoauneventoDOM,porejemplo$formattersy$parsers:adaptanunvalorqueviajadelscopealavistayviceversa,validándolosiesnecesario.$setValidity:permiteengancharconelsistemacomúndevalidacionesdelformulario

Compilevslink

Compile:trabajasobreelDOMoriginal,queseclonaráparausarenlink,antesdeprocesarlasbuscarLink:combinalasdirectivasconunscopeyproduceunavistaviva.Loscambiosenelscopesereflejanenlavistaylasinteraccionesenlavistasereflejanenelmodelo.

Elusodecompileesraramentenecesario.

DirectivasyWebcomponents(PolymerJS)

HayciertosolapeentreellosPartedePolymeracabaráentrandoenAngularJS2(comoporejemploelshimShadowDOM).

Esdifícilpredecirhaciadondeevolucionarán,peroseráapasionante.

¡Gracias!

¿Preguntas?