menú
buscar
¡Esta es una revisión vieja del documento!
Tabla de Contenidos
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:
Estas 3 directivas permiten tratar como 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";
<div>{{mensaje}}</div>
<div ng-bind="mensaje"></div>
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.
¿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 ”{{ }}”.
¿Cuando se usan entonces ng-bind? Únicamente en la primera página de la aplicación ya que esa no la carga AngularJS
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 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:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="PruebaController">
<div ng-bind="mensaje"></div>
<div ng-bind-html="mensaje"></div>
</body>
</html>
- Linea 6: Cargamos el fichero “angular-sanitize.js”
- Línea 11: Se mostrará el texto “Hola <strong>Mundo</strong>”
- 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 <strong>Mundo</strong>";
});
- Linea 1: Cargamos el módulo “ngSanitize”
- Línea 4: El texto contiene el tag HTML
<strong>
ng-bind-html es un riesgo de seguridad ya que nos podrían hacer un ataque de 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 <script>alert('hola mundo');</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>.
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.
