Zdarzenia AngularJS

AngularJS ma swoje własne polecenia zdarzeń HTML.

Zdarzenia AngularJS

Możesz dodać słuchacze zdarzeń AngularJS do swoich elementów HTML, używając jednego lub kilku z następujących poleczeń:

• 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

Polecenie zdarzenia pozwala nam uruchamiać funkcje AngularJS na pewnych wydarzeniach użytkownika.

Zdarzenia AngularJS nie zastępują zdarzeń HTML, oba zdarzenia będą wykonywane.

Zdarzenia myszy

Gdy kursor myszy przeniesie się nad element, będą występować zdarzenia myszy w następującej kolejności:

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

Albo, gdy klikniesz element, zostaną wywołane w następującej kolejności:

• ng-mousedown
• ng-mouseup
• ng-click

Możesz dodać zdarzenia myszy do każdego elementu HTML.

Przykład

Zwiększ zmienną count, gdy kursor myszy przeniesie się nad element H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Przenieś mysz nad mnie!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Spróbuj sam!

Instrukcja ng-click

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

Przykład

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Kliknij mnie!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Spróbuj sam!

Możesz również odwołać się do funkcji:

Przykład

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Kliknij mnie!</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>

Spróbuj sam!

Przełącz, prawda/fałsz

Jeśli chcesz, aby część kodu HTML była wyświetlana po kliknięciu przycisku i ukryta po ponownym kliknięciu, jak menu rozwijane, uczynij przycisk przypominającym przełącznik:

Przykład

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Kliknij mnie!</button>  
<div ng-show="showMe">  
  <h1>Menu：</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Świeże owoc morza</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>

Spróbuj sam!

showMe Zmienna zaczyna się od wartości logicznej false.

myFunc funkcję za pomocą !（nie）operator, który showMe ustawić zmienną na przeciwną wartość jej bieżącej wartości.

$event obiekt

Podczas wywoływania funkcji można $event Obiekt jest przekazywany jako parametr.

$event Obiekt zawiera obiekt zdarzeń przeglądarki:

Przykład

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Przenieś mysz nad mnie!</h1>
<p>Współrzędne: {{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>

Spróbuj sam!