События AngularJS

AngularJS имеет свои собственные директивы событий HTML.

События AngularJS

Вы можете добавить прослушиватели событий AngularJS в свои HTML-элементы, используя одну или несколько из этих директив:

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

Директивы событий позволяют нам запускать функции AngularJS при определенных пользовательских событиях.

Событие AngularJS не перезапишет событие HTML, оба события будут выполнены.

События мыши

События мыши происходят, когда курсор перемещается по элементу, в следующем порядке:

наведения мыши
из-mouseenter
нг-mousemove
ng-mouseleave

Или когда кнопка мыши нажимается на элемент, в следующем порядке:

из-mousedown
из-mouseup
клика

Вы можете добавить события мыши к любому элементу HTML.

Пример

Увеличьте переменную count, когда мышь перемещается по элементу 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>

Директива щелчка

Директива ng-click определяет код AngularJS, который будет выполняться при щелчке элемента.

Пример

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

Вы также можете обратиться к функции:

Пример

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

Переключить, Истина/Ложь

Если вы хотите показать часть HTML-кода при нажатии кнопки и скрыть при повторном нажатии кнопки, например, в раскрывающемся меню, заставьте кнопку вести себя как тумблер:

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

Переменная showMeначинается как логическое значение false.

Функция myFuncустанавливает showMeпеременную в противоположное значение, используя !оператор (не).

$ объект события

Вы можете передать $eventобъект в качестве аргумента при вызове функции.

Объект $eventсодержит объект события браузера:

Пример

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

❮ Предыдущий Следующий ❯

Руководство

Примеры

Ссылка

События AngularJS