Последние учебники веб-разработки
 

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

События мыши

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

  1. нг-MouseEnter
  2. нг-Mouseover
  3. нг-MouseMove
  4. нг-MouseLeave

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

  1. нг-MouseDown
  2. нг-MouseUp
  3. нг-клик

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

пример

Увеличение переменной счетчика при перемещении курсора мыши над элементом 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>
Попробуй сам "

Переключение, True / False

Если вы хотите, чтобы показать раздел 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>
Попробуй сам "

❮ Предыдущая Следующая Глава ❯