menú
buscar
¡Esta es una revisión vieja del documento!
Tabla de Contenidos
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 1) 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-clickque permite especificar una función JavaScript que se ejecutará al pulsar sobre el elemento. El método a ejecutar escambiarMensaje().
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="Dios mundo cruel :-)";
}
}
- Lineas 6-8: Vemos como hemos definido una nueva propiedad llamada
cambiarMensajecuyo 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 propiedadmensajeal nuevo valor “Dios mundo cruel
”.
Si lo pulsamos veremos que en la página HTML ha cambiado el texto al nuevo valor.
Esto que parece una tontería 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 2) AngularJS automáticamente actualiza el HTML. La de líneas de código y dolores de cabeza que nos vamos a ahorrar con ésto.
Ejemplo
Referencias
