Diferencias

Muestra las diferencias entre dos versiones de la página.

--- unidades:01_introduccion:directivas:ngclick [2013/09/10 23:29] – Page moved from unidades:directivas:unidades:01_introduccion:ngclick to unidades:01_introduccion:directivas:ngclick admin
+++ unidades:01_introduccion:directivas:ngclick [2014/07/14 18:23] (actual) – borrado admin
@@ Línea 1: / Línea 1: @@
-====== ng-click ======
-La directiva ''ng-click'' permite ejecutar código JavaScript cuando se pincha sobre el elemento.
-<sxh html>
-<tag ng-click="expresion_a_ejecutar" ></tag>
-</sxh>
-Cuando se pulse sobre el elemento se ejecutará la expresión indicada en la directiva ''ng-click''. La epresión se jecutan en el conteto del ''$scope'' del controlador.
-¿Porque necesitamos esta directiva si hace lo mismo que ''onclick''?
-Debemos usar la directiva ''ng-click'' en vez de ''onclick'' porque ''ng-click'' ejecuta código asociado al ''$scope'' de nuestro controlador y por lo tanto tendremos acceso a las funciones de angular, mientras que con ''onclick'' no lo tendríamos.
-Observa este código HTML:
-<sxh html>
-<body ng-app="MiApp" ng-controller="MiPageController">
-    A:<input type="number" ng-model="a"><br />
-    B:<input type="number" ng-model="b"><br />
-    <button ng-click="sumar()">Sumar</button><br />
-    Resultado:<input type="number" ng-model="resultado"><br />
-</body>
-</sxh>
-Los inputs vienen ligados a las variables a y b del modelo (líneas 2 y 3). En la línea 4 se indica mediante esta directiva que se ejecute una función ''sumar()'' definida en el ''$scope''. Esta función alterará el valor de la variable ''resultado'', lo que producirá a su vez que aparezca la suma en la línea 5.
-Por tanto, al pulsar sobre el botón se ejecutará la función ''sumar()'' definida en el ''$scope'' y se mostrará el resultado. El modelo quedaría de esta forma:
-<sxh js>
-function MiPageController($scope) {
-    $scope.a=3;
-    $scope.b=7;
-    $scope.resultado=0;
-    $scope.sumar=function() {
-      $scope.resultado=$scope.a+$scope.b;
-    }
-}
-</sxh>
-**Demo**
-{{url>http://jsfiddle.net/logongas/twGDD/embedded/result,js,html}}