====== 4.1 ng-bind ======
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-html]]
* [[#ng-non-bindable]]
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 "%%{{ %%}}".
$scope.mensaje = "Hola Mundo";
{{mensaje}}
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. Más 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 "%%{{ %%}}".
¿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 =====
Si cambiamos el ejemplo para que el texto de la propiedad ''$scope.mensaje'' sea "Hola Mundo" veremos que el texto que aparece es "Hola Mundo" . Es decir, que no se ha renderizado el tag ''>'' 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"
Veamos un ejemplo con el texto "Hola Mundo", es decir haciendo que **Mundo** esté en negrita:
* Linea 6: Cargamos el fichero "angular-sanitize.js"
* Línea 11: Se mostrará el texto "Hola Mundo"
* Línea 12: Se mostrará el texto "Hola **Mundo**". Es decir que tratarán los tag HTML como HTML
var app = angular.module("app", ['ngSanitize']);
app.controller("PruebaController", function($scope) {
$scope.mensaje = "Hola Mundo";
});
* Linea 1: Cargamos el módulo "ngSanitize"
* Línea 4: El texto contiene el tag HTML ''''
Podemos pensar que usar ''ng-bind-html'' es un riesgo de seguridad ya que nos podrían hacer un ataque de [[http://es.wikipedia.org/wiki/Cross-site_scripting|Cross-site scripting]] inyectando JavaScript malicioso . Por suerte AngularJS no permite cualquier tipo de HTML y limita los tag que permitirá.
Por ejemplo si el valor del mensaje fuera:
$scope.mensaje = "Hola ";
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 ''