¡Esta es una revisión vieja del documento!


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 HTML 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>

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

Ejemplo

unidades/02_angular/02_eventos.1404378343.txt.gz · Última modificación: 2014/07/03 11:05 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0