Eventos

Hemos visto como indicando un mensaje en el $scope podemos mostrarlo fácilmente en el HTML mediante {{ }}. Pero la gracia de angular es que si modificamos el mensaje se actualiza automáticamente el HTML. Para poder cambiar el mensaje debemos incluir una nueva directiva ¹⁾ llamada ng-click que permite ejecutar una función JavaScript al pulsar sobre un elemento HTML.

El ejemplo ahora quedaría así:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <h1>{{mensaje}}</h1>
    <button ng-click="cambiarMensaje()">Cambio</button>
  </body>

</html>

Línea 11: Está la nueva directiva ng-click que permite especificar una función JavaScript que se ejecutará al pulsar sobre el elemento. El método a ejecutar es cambiarMensaje().

Desgraciadamente el método no puede ser una simple función JavaScript llamada cambiarMensaje. Al igual que con las variables que deben estar en el $Scope, la función cambiarMensaje tambien deberá ser una función definida en el $scope.

var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
  
  $scope.cambiarMensaje=function() {
    $scope.mensaje="Adios mundo cruel :-)";
  }
  
}

Lineas 6-8: Vemos como hemos definido una nueva propiedad llamada cambiarMensaje cuyo valor es una función anónima en JavaScript y que no tiene parámetros. El cuerpo de la función es simplemente cambiar el texto de la propiedad mensaje al nuevo valor “Adios mundo cruel ”.

Puede parecer un poco extraño la forma de definir una función en el $scope pero lo que hacemos es crear la función , sin nombre, y luego se la asignamos a la propiedad cambiarMensaje. De esa forma la propiedad cambiarMensaje realmente es una función y podría se llamada de la siguiente forma:

$scope.cambiarMensaje();

Si lo pulsamos veremos que en la página HTML ha cambiado el texto al nuevo valor.

Esto que parece una cosa de poca importancia es una de las cosas mas fascinantes de AngularJS. Antes de AngularJS si cambiábamos el valor de una variable en JavaScript debíamos llamar explicitamente a alguna función creada por nosotros que actualizara el HTML y rezar para que no se nos olvidara llamarlo ya que sino el HTML no se actualizaría. Ahora con AngularJs podemos olvidarnos de ello. Siempre que cambiamos el valor de una variable ²⁾ AngularJS automáticamente actualiza el HTML. La de líneas de código y dolores de cabeza que nos vamos a ahorrar con ésto.

databinding

Seguimos con el Data-binding y vemos ahora que al modificar el modelo automáticamente se regenera el HTML.

La generación del HTML se produce también cada vez que cambia el modelo

¿Que hace Angular? Como ya vimos en el tema anterior angular genera el HTML a partir del modelo y la plantilla , pero si se modifica el modelo , AngularJS automáticamente vuelve a regenerar el HTML. Esto es algo que con JSP o ASP implica un refresco de página con todos los problemas que lleva implícitos. Con angular es simplemente cambiar un valor en JavaScript: $scope.mensaje=“Adios mundo cruel ”;

En el siguiente tema seguiremos viendo la última características del Data-binding de AngularJS

Ejemplo

Referencias

ngClick

¹⁾ Una directiva es un nuevo elemento o atributo HTML que se ha inventado angularjs en el HTML

²⁾ que como ya hemos dicho forme parte del $scope

unidades/02_angular/02_eventos.1404466977.txt.gz · Última modificación: 2014/07/04 11:42 por admin

Ir hasta arriba