Události AngularJS

❮ Předchozí Další ❯

AngularJS má své vlastní direktivy událostí HTML.

Události AngularJS

Posluchače událostí AngularJS můžete přidat do prvků HTML pomocí jedné nebo více z těchto direktiv:

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

Direktivy událostí nám umožňují spouštět funkce AngularJS při určitých uživatelských událostech.

Událost AngularJS nepřepíše událost HTML, provedou se obě události.

Události myši

Události myši nastanou, když se kurzor přesune nad prvek, v tomto pořadí:

přejetí myší
z-mouseenter
ng-mousemove
ng-mouseleave

Nebo při kliknutí tlačítkem myši na prvek v tomto pořadí:

of-mousedown
of-mouseup
kliknutí

Události myši můžete přidat do libovolného prvku HTML.

Příklad

Zvyšte proměnnou počet, když se myš přesune přes prvek H1:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

Směrnice o kliknutí

Direktiva ng-click definuje kód AngularJS, který se spustí, když se na prvek klikne.

Příklad

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

Můžete také odkazovat na funkci:

Příklad

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>

Přepnout, Pravda/nepravda

Pokud chcete po kliknutí na tlačítko zobrazit část kódu HTML a skrýt, když na tlačítko znovu kliknete, jako rozbalovací nabídku, nastavte tlačítko, aby se chovalo jako přepínač:

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

Proměnná showMezačíná jako booleovská hodnota false.

Funkce myFuncnastaví showMeproměnnou na opak toho, čím je, pomocí !operátoru (ne).

$event Objekt

$eventPři volání funkce můžete objekt předat jako argument.

Objekt $eventobsahuje objekt události prohlížeče:

Příklad

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

❮ Předchozí Další ❯

Tutorial

Příklady

Odkaz

Události AngularJS