menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:01_introduccion:directivas:ngclick [2013/09/10 23:29] admin Page moved from unidades:directivas:unidades:01_introduccion:ngclick to unidades:01_introduccion:directivas:ngclick |
— (actual) | ||
|---|---|---|---|
| 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}} | ||
