Programuju s Aran

AngularJS 5: Events

Programuju Aran's photo
Programuju Aran
·

0 min read

V minulém díle jsme začali používat controllery a $scope. Dneska si ukážeme, jak takový controller obohatit o pořádnou funkčnost založenou na podnětech "zvenčí", jako je kliknutí na tlačítko či stisknutí klávesy.

AngularJS obsahuje určité directives, které můžeme použít k vytvoření speciální funkčnosti na DOM events jako je např. click či dblclick (dvojklik).

Event directives

Mezi podporované directives patří:

  • ng-blur - zaregistruje, když se kurzor dostane mimo input text-boxu
  • ng-click - klik
  • ng-dblclick - dvojklik
  • ng-focus - zaregistruje, když se kurzor dostane do input text-boxu
  • ng-keydown - stisknutí tlačítka
  • ng-keypressed - držení tlačítka
  • ng-keyup - puštění stisknutého tlačítka
  • ng-mouseenter - vždy když myš se myš nachází nad určitým elementem a přemění se na kurzor
  • ng-mouseleave - vždy když opustí div
  • ng-mousemove -registruje pohyb při přejetí (hover), přičemž vždy, když se myš pohne, vysílá signál
  • ng-mouseover - vždy, když myš přejde po DIVu
  • ng-mouseup - vždy, když stiskneme jakékoliv tlačítko na myši

U všech directives platí, že registrují určitý signál nad DIVem, v kterém je daná event directive uvedena.

Vytvořme si aplikaci, která bude počítat počet kliků pomocí ng-click:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="mojeApk" ng-controller="pocetKliknuti">
    <input type="button" value="Klikni na mě!"
 ng-click="pocet = pocet + 1">
    <p>{{pocet}}</p>
</div>
    <script>
        var ngApk = angular.module('mojeApk',[]);
        ngApk.controller('pocetKliknuti', function ($scope) {
            $scope.pocet = 0;
        })
    </script>
</body>
</html>

Controller pocetKliknuti inicializuje vlastnost (property) pocet. Pomocí directive ng-click započneme click event tlačítka a zvýšíme hodnotu vlastnosti pocet.

directive