События 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-события, оба события будут выполнены.

Мышьные события

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

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

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

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

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

Пример

Увеличивается переменная count при перемещении мыши над элементом H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Перетащи мышь над мной!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Попробуйте сами

Инструкция ng-click

ng-click Инструкции определяют AngularJS-код, который будет выполнен при нажатии на элемент.

Пример

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Нажми меня!</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()">Нажми меня!</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()">Нажми меня!</button>  
<div ng-show="showMe">  
  <h1>Меню：</h1>  
  <div>Пицца</div>  
  <div>Паста</div>  
  <div>Морепродукты</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 Объект передается в качестве параметра.

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

Пример

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Переместите мышь над мной!</h1>
<p>Координаты: {{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>

Попробуйте сами