Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:04_masdirectivas:01_ngbind [2014/08/05 09:30]
admin [Referencias]
unidades:04_masdirectivas:01_ngbind [2014/08/29 22:27] (actual)
admin
Línea 1: Línea 1:
 ====== 4.1 ng-bind ====== ====== 4.1 ng-bind ======
-En este tema vamos a ver 3 directivas que están muy relacionada entre si y con las llaves "%%{{ %%}}" de Angular:+En este tema vamos a ver 3 directivas que están muy relacionada entre sí y con las llaves "%%{{ %%}}" de Angular:
   * [[#​ng-bind]]   * [[#​ng-bind]]
   * [[#​ng-bind-html]]   * [[#​ng-bind-html]]
   * [[#​ng-non-bindable]]   * [[#​ng-non-bindable]]
  
-Estas 3 directivas permiten tratar ​como se enlazan los datos de ''​$scope''​ en la página HTML.+Estas 3 directivas permiten tratar ​cómo se enlazan los datos de ''​$scope''​ en la página HTML.
  
 ===== ng-bind ===== ===== ng-bind =====
Línea 21: Línea 21:
  
  
-Las 2 líneas hacen los mismo. Entonces , ¿que ventana ​tiene ''​ng-bind''?​ Resulta que hasta que se carga AngularJS y cambia el valor de ''​%%{{mensaje%%}}''​ por el texto definitivo, durante un pequeño instante de tiempo el usuario final vería ''​%%{{mensaje%%}}'',​ lo que queda muy feo. Para evitarlo se debe usar la directiva ''​ng-bind''​.+Las 2 líneas hacen los mismo. Entonces , ¿qué ventaja ​tiene ''​ng-bind''?​ Resulta que hasta que se carga AngularJS y cambia el valor de ''​%%{{mensaje%%}}''​ por el texto definitivo, durante un pequeño instante de tiempo el usuario final vería ''​%%{{mensaje%%}}'',​ lo que queda muy feo. Para evitarlo se debe usar la directiva ''​ng-bind''​.
  
-¿Hay entonces que dejar de usar "%%{{ %%}}"? No, mas adelante veremos que a excepción de la primera página, AngularJS cargará el resto de páginas de tu aplicación. En el caso de que AngularJS las cargue ya aparecerían con el texto correcto antes de mostrarlo al usuario final, por lo que en esos casos se puede seguir usando "%%{{ %%}}".+¿Hay entonces que dejar de usar "%%{{ %%}}"? No.  Más adelante veremos quea excepción de la primera página, AngularJS cargará el resto de páginas de tu aplicación. En el caso de que AngularJS las cargue ya aparecerían con el texto correcto antes de mostrarlo al usuario final, por lo que en esos casos se puede seguir usando "%%{{ %%}}".
  
-¿Cuando ​se usan entonces ''​ng-bind''?​ Únicamente en la primera página de la aplicación ya que esa no la carga AngularJS+¿Cuándo ​se usa entonces ''​ng-bind''?​ Únicamente en la primera página de la aplicación ya que ésa no la carga AngularJS.
  
  
  
 ===== ng-bind-html ===== ===== ng-bind-html =====
-Si cambiamos el ejemplo para que el texto de la propiedad ''​$scope.mensaje''​ sea "Hola <​strong>​Mundo</​strong>"​ veremos que el texto que aparece ​el "Hola <​strong>​Mundo</​strong>"​ . Es decir que no se ha renderizado el tag ''<​strong>>''​ ya que AngularJs lo ha tratado como texto.+Si cambiamos el ejemplo para que el texto de la propiedad ''​$scope.mensaje''​ sea "Hola <​strong>​Mundo</​strong>"​ veremos que el texto que aparece ​es "Hola <​strong>​Mundo</​strong>"​ . Es decirque no se ha renderizado el tag ''<​strong>>''​ ya que AngularJs lo ha tratado como texto.
  
-Si queremos que el valor se trate como HTML deberemos usar la directiva ''​ng-bind-html''​. Para usar esta directiva antes es necesario cargar el módulo de AngularJS llamado ''​ngSanitize''​ el cual está en un fichero aparte de AngularJS llamado "​angular-sanitize.js"​+Si queremos que el valor se trate como HTML deberemos usar la directiva ''​ng-bind-html''​. Para usar esta directiva antes es necesario cargar el módulo de AngularJS llamado ''​ngSanitize''​el cual está en un fichero aparte de AngularJS llamado "​angular-sanitize.js"​
  
 Veamos un ejemplo con el texto "Hola <​strong>​Mundo</​strong>",​ es decir haciendo que **Mundo** esté en negrita: Veamos un ejemplo con el texto "Hola <​strong>​Mundo</​strong>",​ es decir haciendo que **Mundo** esté en negrita:
Línea 76: Línea 76:
 </​sxh>​ </​sxh>​
  
-Al mostrarlo en la página no se ejecutaría el ''​alert''​ ya que angular no va a permitir nada que esté dentro del tag ''<​script>''​.+al mostrarlo en la página no se ejecutaría el ''​alert''​ ya que angular no va a permitir nada que esté dentro del tag ''<​script>''​.
 </​note>​ </​note>​
 ===== ng-non-bindable ===== ===== ng-non-bindable =====
-Esta última directiva lo que permite es que *NO** se enlacen las "%%{{ %%}}" aunque aparezcan. Es simplemente una forma de escapar las "%%{{ %%}}" para que Angular no las trate.+Esta última directiva lo que permite es que *NO** se enlacen las "%%{{ %%}}" aunque aparezcan. Es simplemente una forma de escapar ​de las "%%{{ %%}}" para que Angular no las trate.
  
 Veamos un ejemplo Veamos un ejemplo
Línea 90: Línea 90:
 </​sxh>​ </​sxh>​
  
-El resultado de ésto sigue siendo el texto "​%%{mensaje%%}}",​ es decir sin tratar por AngularJS+El resultado de ésto sigue siendo el texto "​%%{mensaje%%}}",​ es decir sin tratar por AngularJS.
  
  
Línea 96: Línea 96:
 Hay una cuarta directiva llamada [[https://​docs.angularjs.org/​api/​ng/​directive/​ngCloak|ng-cloak]] que hace que inicialmente el elemento HTML no sea visible hasta que no se haya ejecutado el controlador y AngularJS calcule si en función de ''​ng-show''​ o ''​ng-hide''​ debe verse el elemento. Hay una cuarta directiva llamada [[https://​docs.angularjs.org/​api/​ng/​directive/​ngCloak|ng-cloak]] que hace que inicialmente el elemento HTML no sea visible hasta que no se haya ejecutado el controlador y AngularJS calcule si en función de ''​ng-show''​ o ''​ng-hide''​ debe verse el elemento.
  
-De esa forma se evita que inicialmente se vea un bloque HTML para que al iniciarse AngularJS ​deba ocultarse. Cosa que queda muy fea de cara al usuario. Es decir que cumple una función similar a ''​ng-bind''​ pero para elementos que luego se harán invisibles.+De esa forma se evita que inicialmente se vea un bloque HTML  que deba ocultarse ​al iniciarse AngularJS, cosa que queda muy fea de cara al usuario. Es decir que cumple una función similar a ''​ng-bind''​ pero para elementos que luego se harán invisibles.
 </​note>​ </​note>​
 ===== Ejemplo ===== ===== Ejemplo =====
unidades/04_masdirectivas/01_ngbind.txt · Última modificación: 2014/08/29 22:27 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0