5. Propiedad
Valor
restrict
Puede ser A,E,C y M que significan
attribute, element, class, o comment
scope
Cada subpropiedad puede tener cualquiera de estos 3
valores:
•@: el valor es de un solo sentido
•=: el valor es de dos sentidos
•&: guarda una referencia a una función o expresión
template
La base para escribir el código que usará la directiva
replace
Boolean que indica si se debe reemplazar el html
original por el html generado por el template
transclude
Indica si se debe preservar el contenido de la
declaración de la directiva en el html original, se usa
en conjunto con ng-transclude
controller
La controladora que se usara para darle ambito al
template, no siempre es necesario
5
6. Propiedad
Valor
requires
Indica si una directiva depende de otra
link
Función que realiza la configuración inicial de la
directiva. Recibe cuatro parametros:
function link(scope, iElement, iAttrs, controller)
•scope: indica el objeto creado por la propiedad
scope.
•iElement: se refiere al objeto base de la controladora.
Este vienen encapsulado en jqLite o Jquery (si es que
se incluyo en el proyecto)
•iAttrs: los atributos que se asignaron al html original
de la directiva declarada
•Controller: el controller de la directiva padre. Solo
cuando se ha establecido la propiedad requires
6
7.
Las directivas se pueden usar
incrementar la reusabilidad del codigo
◦ Ejemplo:
◦ http://codepen.io/scyrizales/full/egdsB
para
8.
Las directivas se pueden usar para
implementar el doble binding entre Angular y
componentes de terceros
◦ Ejemplo:
◦ http://codepen.io/brunoscopelliti/full/zIstF
10.
Cada vez que cambia el scope, se actualiza la
vista.
Cada vez que un “major event” sucede en la
aplicación, y luego de que sucede, se ejecuta
una operación “digest” y se actualiza el scope
10
11.
Entradas de usuario:
◦ Mouse, keyboard, etc.
Eventos de Navegador:
◦ timeout, blur, etc.
Llamadas Ajax:
◦ json, templates, etc…
11
12.
$digest es un metodo interno que realiza la
verificación de los cambios entre la vista y el
scope y hace las respectivas actualizaciones al
scope
$apply sirve para llamar desde fuera al $digest.
Cuando usamos otras librerias externas, es
necesario llamar a $apply
$$phase es un indicador de si esta corriendo un
$digest. Debemos tenerlo en cuenta para no
aplicar $apply porque nos dará un error.
12
14.
Para evitar los problemas de usar el $apply
podemos crear esta función en el rootScope
14
15.
16.
Se basan en 3 funciones
◦ $emit
◦ $broadcast
◦ $on
16
17.
Desde el lugar donde se tome el punto de
referencia, hay dos cadenas de herencias
Esto se cumple para las controladoras y las
directivas
Depende de hacia donde nos queramos
comunicar hay un método distinto.
17
18.
Envia un evento hacia arriba en la cadena de
scopes
Va desde el punto de origen, hacia el
rootscope
Una directiva la puede usar para comunicarse
con la controladora padre.
18
19.
Envia un evento hacia abajo en la cadena de
scopes
Va desde el punto de origen, hacia el
rootscope
Una controladora la puede usar para
comunicarse con controladoras hijas o
directivas.
19
20.
Permite escuchar un evento
listenerFn es una funcion con el siguiente
formato:
◦ function(event, args...)
The event es un objeto Event que tiene varias
propiedades
20
21.
targetScope - {Scope}: scope Origen de donde
fue $emit-ido o $broadcast-eado.
currentScope - {Scope}: el scope en el que se
llama la función $on.
name - {string}: nombre del Evento.
stopPropagation - {function=}: llamar función
stopPropagation cancelara toda posible
propagación (solo para eventos que
fueron $emit-idos).
preventDefault - {function}:
calling preventDefault sets defaultPrevented fl
ag to true.
defaultPrevented - {boolean}: true
if preventDefault was called.
21
22.
Se puede inyectar el rootScope en una
controladora o directiva para poder utilizar el
$broadcast como un event hub global
Lo ideal seria encapsularlo en un servicio para
poder inyectarlo a voluntad sin exponer las
demas funciones del rootScope
22
23.
Refactorizar el ejemplo del carrito
Crear una directiva que muestre el conteo de
items
Construir un servicio que se comporte como
Event Hub
Que el conteo se actualize mediante el
EventHub
23
31.
Scope: true
◦ Hija hereda todas las propiedades del padre
Scope: {} No hereda nada
◦ $parent apunta al scope padre
31
32.
Teórico, 15 minutos durante la semana.
◦ Basado en las diapositivas
Práctico:
◦ Realizar un blog,
◦ Login, una directiva que escuche cuando alguien se
logea y de la bienvenida
◦ CRUD Posts
◦ Usar filtros para la fecha
◦ Usar routing, services, controllers, directives
◦ Viernes 28/02
32
