Wydarzenia AngularJS

❮ Poprzedni Następny ❯

AngularJS ma własne dyrektywy zdarzeń HTML.

Wydarzenia AngularJS

Możesz dodać detektory zdarzeń AngularJS do swoich elementów HTML, używając jednej lub więcej z tych dyrektyw:

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

Dyrektywy zdarzeń pozwalają nam uruchamiać funkcje AngularJS przy określonych zdarzeniach użytkownika.

Zdarzenie AngularJS nie nadpisze zdarzenia HTML, oba zdarzenia zostaną wykonane.

Zdarzenia myszy

Zdarzenia myszy występują, gdy kursor przesuwa się nad elementem, w następującej kolejności:

najechania kursorem myszy
z-mouseenter
ng-mousemove
ng-mouseleave

Lub po kliknięciu przycisku myszy na elemencie, w tej kolejności:

z myszy
z-mysz
kliknięcia

Możesz dodać zdarzenia myszy do dowolnego elementu HTML.

Przykład

Zwiększ zmienną count, gdy myszka przesuwa się nad elementem 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>

Kliknij Dyrektywa

Dyrektywa ng-click definiuje kod AngularJS, który zostanie wykonany po kliknięciu elementu.

Przykład

<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>

Możesz także odwołać się do funkcji:

Przykład

<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>

Przełącz, prawda/fałsz

Jeśli chcesz pokazać sekcję kodu HTML po kliknięciu przycisku i ukryć po ponownym kliknięciu przycisku, tak jak menu rozwijane, spraw, aby przycisk działał jak przełącznik:

<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>

Zmienna showMezaczyna się jako wartość logiczna false.

Funkcja myFuncustawia showMezmienną na przeciwną do tego, co jest, za pomocą !operatora (nie).

$obiekt zdarzenia

Możesz przekazać $eventobiekt jako argument podczas wywoływania funkcji.

Obiekt $eventzawiera obiekt zdarzenia przeglądarki:

Przykład

<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>

❮ Poprzedni Następny ❯

Instruktaż

Przykłady

Odniesienie

Wydarzenia AngularJS