https://cursoangularjs.es/ 2026-04-12T22:49:28+02:00 https://cursoangularjs.es/ https://cursoangularjs.es/lib/tpl/dokubook/images/favicon.ico text/html 2014-08-05T11:38:06+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:00_start&rev=1407231486&do=diff En esta unidad se explican mas directivas de AngularJS y el $rootScope, haciendo finalmente un ejemplo en el que se usan las mayoría de ellas. Temas * 4.1 ng-bind * 4.2 ng-src * 4.3 ng-href * 4.4 ng-repeat * 4.5 ng-options * 4.6 ng-if: Se explica la herencia de $scope * 4.7 ng-switch * 4.8 ng-include * 4.9 ng-style * 4.10 ng-class * 4.11 $rootScope * 4.12 Ejemplo de mas directivas: ejemplo de directivas anteriores para la aplicación de seguros médicos text/html 2014-08-29T22:27:24+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:01_ngbind&rev=1409344044&do=diff En este tema vamos a ver 3 directivas que están muy relacionada entre sí y con las llaves ”{{ }}” de Angular: * * * Estas 3 directivas permiten tratar cómo se enlazan los datos de $scope en la página HTML. ng-bind Permite que se enlace una propiedad del $scope mediante esta directiva en vez de usar ”{{ }}”. text/html 2014-08-29T22:31:06+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:02_ngsrc&rev=1409344266&do=diff La diectiva ng-src cumple una función similar a ng-bind. Si mostramos en una página una imagen en la que parte de la URL es una expresión de AngularJS mediante ””{{ }}”” ¿qué ocurre hasta que se carga AngularJS? Resulta que el propio navegador intentará cargar una URL de una imagen que contendrá ””{{ }}”” y obviamente no la encontrará, mostrando el típico dibujito de que no ha encontrado la imagen, aunque una vez cargado AngularJS se cargará la imagen correcta. text/html 2014-07-31T14:00:38+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:03_nghref&rev=1406808038&do=diff La directiva ng-href cumple una función similar a ng-src. Evita que se pueda pinchar en un enlace <a> con una expresión de AngularJS antes de que ésta se haya resuelto. Veamos un ejemplo: * Linea 9: Al usar el atributo href el usuario podría pinchar antes de que se resuelva , lo que le llevaría a la URL ”{{url}}”, URL que ovbiamente no existe. * Línea 10: Usando la directiva ng-href no se puede pinchar en el link hasta que AngularJS lo haya resuelto. text/html 2014-08-29T22:37:59+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:04_ngrepeat&rev=1409344679&do=diff Esta directiva es una de las más útiles de AngularJS y permite repetir una serie de tag HTML en función de un array de datos de $scope. Su utilidad es para hacer tablas o similar, es decir para estructuras que se repiten. Veamos un ejemplo para explicar su funcionamiento. text/html 2014-11-07T20:45:42+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:05_ngoptions&rev=1415389542&do=diff En la primera unidad ya vimos cómo usar el tag <select> mediante la directiva ng-model. Lo que vamos a ver ahora es cómo rellenar todas sus opciones automáticamente a partir de los datos del $scope. Es algo parecido al tag ng-repeat que acabamos de ver y para ello se utiliza la directiva ng-options text/html 2014-08-29T22:58:23+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:06_ngif&rev=1409345903&do=diff La directiva ng-if nos permite que exista o no un tag en la página. Podríamos pensar que es similar a ng-show o ng-hide, pero éstas últimas directivas simplemente los ocultan mediante CSS mientras que ng-if los elimina del DOM o los vuelve a añadir. text/html 2014-08-29T23:02:24+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:07_ngswitch&rev=1409346144&do=diff La directiva ng-switch es similar a ng-if y como nos podemos imaginar es como el switch de la programación. Es decir que permite que entre varios conjuntos de tags solo esté uno de ellos, borrando los que no cumplen la condición. Esta directiva realmente está compuesta por 4 distintas: text/html 2014-08-29T23:05:13+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:08_nginclude&rev=1409346313&do=diff Esta directiva, a diferencia de otra que hemos visto, se puede usar directamente como un tag HTML en vez de como un atributo HTML. SE usa para cargar trozos de HTML en la página. Es como los include de la parte de servidor pero ahora desde JavaScript. text/html 2014-08-29T23:07:48+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:09_ngstyle&rev=1409346468&do=diff Esta directiva permite modificar el estilo CSS de un tag pero definiendo el estilo como un objeto del $scope. Dicho objeto tendrá propiedades cuyo nombre será el nombre del estilo CSS y el valor de la propiedad será el valor del estilo CSS. Es decir que si creamos el siguiente objeto JavaScript en el $scope: text/html 2014-08-30T09:52:08+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:10_ngclass&rev=1409385128&do=diff La directiva ng-class permite de una forma sencilla añadir y quitar clases CSS a un tag. La forma de hacerlo es mediante un objeto JavaScript que esté en el $scope. En dicho objeto , el nombre de cada propiedad será el nombre de una clase CSS. Si el valor de dicha propiedad es true se añadirá la clase CSS al tag y si está a false se quitará su clase CSS del tag. text/html 2014-08-30T09:58:06+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:11_rootscope&rev=1409385486&do=diff En este tema vamos a hablar del $rootScope, que no es una directiva , aunque la unidad se llame Mas directivas. El $rootScope es el scope del que heredan el resto de los scopes que usamos en los controladores . Su utilidad es como variable global ya que nos permite añadir propiedades a él y que el resto de controladores tengan acceso. text/html 2014-08-30T10:07:27+02:00 https://cursoangularjs.es/doku.php?id=unidades:04_masdirectivas:12_ejemploseguro&rev=1409386047&do=diff En este tema retornamos el ejemplo del seguro médico para añadir varias de las directivas que hemos visto. La lista de modificaciones a realizar es la siguiente: * Modificar el desplegable de “Sexo” para que use ng-options * Añadir una cabecera y un pie: * Usaremos ng-include. * En la cabecera añadiremos una imagen usando ng-src