AngularJS 5: Events

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.

Programuju s Aran's Blog

Programuju s Aran's Blog

AngularJS 5: Events

Event directives