menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:04_masdirectivas:02_ngsrc [2014/07/31 13:31] admin creado |
unidades:04_masdirectivas:02_ngsrc [2014/08/29 22:31] (actual) admin |
||
|---|---|---|---|
| Línea 2: | Línea 2: | ||
| La diectiva ''ng-src'' cumple una función similar a ''ng-bind''. | 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 ""%%{{ %%}}"". ¿que ocurre hasta que se carga AngularJS? | + | 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 un 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. | + | 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. |
| Veamos un ejemplo: | Veamos un ejemplo: | ||
| - | <sxh html;index.html;highlight: [9,10,12];> | + | |
| + | <sxh html;title:index.html;highlight: [9,10,12];> | ||
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html ng-app="app"> | <html ng-app="app"> | ||
| Línea 24: | Línea 25: | ||
| </html> | </html> | ||
| </sxh> | </sxh> | ||
| + | |||
| + | * Linea 9: Al usar el atributo ''src'' se verá el icono de que no ha cargado la imagen aunque luego ya aparece la imagen correcta. | ||
| + | * Línea 10: Usando la directiva ''ng-src'' no se ve nada hasta que no se carga la imagen correcta. | ||
| + | * Linea 12: Cargamos el fichero "script.js" para que se vea mejor que aún no se ha cargado la imagen ya que primero se cargarán las imágenes y luego se cargará este script. | ||
| <sxh js;title:script.js;highlight: [3,6];> | <sxh js;title:script.js;highlight: [3,6];> | ||
| Línea 35: | Línea 40: | ||
| </sxh> | </sxh> | ||
| + | * Linea 3: Ponemos un mensaje para que podamos ver cómo se ve el icono de que no hay imagen. | ||
| + | * Línea 6: Ponemos en el ''$scope'' el nombre del fichero a cargar. | ||
| + | |||
| + | {{url>http://embed.plnkr.co/vNsiRbD8VgV0BV8wjMJs}} | ||
| + | |||
| + | ====== Referencias ====== | ||
| + | * [[https://docs.angularjs.org/api/ng/directive/ngSrc|ng-src]] | ||
