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:

• ng-bind
• ng-bind-html
• ng-non-bindable

Estas 3 directivas permiten tratar como se enlazan los datos de $scope en la página HTML.

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