При создании веб-приложений рано или поздно вашему приложению потребуется обрабатывать события DOM, такие как щелчки мыши, движения, нажатия клавиш клавиатуры, события изменения и т. Д.
AngularJS может добавить функциональность, которая может использоваться для обработки таких событий.
Например, если на странице есть кнопка и вы хотите что-то обработать при нажатии кнопки, мы можем использовать директиву события ng-click.
В этом курсе мы подробно рассмотрим директивы Event.
В этом уроке вы узнаете
Что такое директива ng-click?
«Нг-клик директива» используется для применения пользовательского поведения, когда элемент в HTML щелкнул. Обычно это используется для кнопок, потому что это наиболее распространенное место для добавления событий, которые реагируют на нажатия, выполненные пользователем
Давайте рассмотрим простой пример того, как мы можем реализовать событие click.
В этом примере у нас будет переменная-счетчик, значение которой будет увеличиваться при нажатии пользователем кнопки.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="">
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<div>The Current Count is {{count}}</div>
</body>
</html>
Объяснение кода:
- Сначала мы используем директиву ng-init, чтобы установить значение локальной переменной count в 0.
- Затем мы вводим директиву события ng-click для кнопки. В этой директиве мы пишем код для увеличения значения переменной count на 1.
- Здесь мы показываем значение переменной count пользователю.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из приведенного выше вывода,
- Мы видим, что кнопка «Увеличение» отображается и значение переменной count изначально равно нулю.
- Когда вы нажимаете кнопку увеличения, значение счетчика увеличивается соответственно, как показано на выходном изображении ниже.
Что такое директива ng-show?
Директива ng-Show используется для отображения или скрытия заданного элемента HTML на основе выражения, предоставленного атрибуту ngShow. На заднем плане элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide на элемент.
На заднем плане элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide на элемент.
Давайте рассмотрим пример того, как мы можем использовать директиву «ngshow event» для отображения скрытого элемента.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
</script>
</body>
</html>
Объяснение кода:
- Мы присоединяем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию ShowHide, которая определена в нашем контроллере — DemoController.
- Мы прикрепляем атрибут ng-show к тегу div, который содержит текст Angular. Это тег, который мы собираемся показать / скрыть на основе атрибута ng-show.
-
В контроллере мы присоединяем переменную-член IsVisible к объекту области. Этот атрибут будет передан угловому атрибуту ng-show (шаг # 2) для управления видимостью элемента управления div. Сначала мы устанавливаем значение false, чтобы при первом отображении страницы тег div был скрыт.
Примечание: — Если для атрибута ng-show установлено значение true, последующий элемент управления, который в нашем случае является тегом div, будет показан пользователю. Если для атрибута ng-show установлено значение false, элемент управления будет скрыт от пользователя.
- Мы добавляем код в функцию ShowHide, которая установит для переменной-члена IsVisible значение true, чтобы тег div мог быть показан пользователю.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Выход: 1
Из вывода
- Сначала вы можете увидеть, что тег div с текстом «AngularJS» не отображается, и это потому, что объект области видимости isVisible изначально имеет значение false, которое затем впоследствии передается директиве ng-show тега div.
- Когда вы нажимаете кнопку «Показать AngularJS», она изменяет переменную-член isVisible, чтобы стать истинной, и, следовательно, текст «Angular» становится видимым для пользователя. Приведенный ниже вывод будет показан пользователю.
Вывод теперь показывает тег div с текстом Angular.
Что такое директива ng-hide?
С помощью директивы ng-hide элемент будет скрыт, если выражение TRUE. Если выражение имеет значение FALSE, элемент будет показан. На заднем плане элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide на элемент.
С другой стороны, с помощью ng-hide, элемент скрыт, если выражение истинно, и будет показано, если оно ложно.
Давайте рассмотрим пример, аналогичный показанному для ngShow, чтобы продемонстрировать, как можно использовать атрибут ngHide.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Hide Angular" ng-click="ShowHide()"/>
<br><br><div ng-hide="IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = $scope.IsVisible = true;
}
});
</script>
</body>
</html>
Объяснение кода:
- Мы присоединяем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию ShowHide, которая определена в нашем контроллере — DemoController.
- Мы прикрепляем атрибут ng-hide к тегу div, который содержит текст Angular. Это тег, который мы собираемся показать / скрыть на основе атрибута ng-show.
- В контроллере мы присоединяем переменную-член isVisible к объекту области. Этот атрибут будет передан угловому атрибуту ng-show для управления видимостью элемента управления div. Сначала мы устанавливаем значение false, чтобы при первом отображении страницы тег div был скрыт.
- Мы добавляем код в функцию ShowHide, которая установит для переменной-члена IsVisible значение true, чтобы тег div мог быть показан пользователю.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Изначально вы можете видеть, что тег div с текстом «AngularJs» изначально отображается, поскольку значение свойства false отправляется в директиву ng-hide.
- Когда мы нажимаем кнопку «Скрыть угол», значение свойства true отправляется в директиву ng-hide. Следовательно, будет показан следующий вывод, в котором слово «Angular» будет скрыто.
Директивы слушателя событий AngularJS
Вы можете добавить прослушиватели событий AngularJS к своим элементам HTML, используя одну или несколько из следующих директив:
- нг-размытие
- нг-изменения
- нг-клик
- нг-копия
- нг-срез
- нг-DblClick
- нг-фокус
- нг-KeyDown
- нг-нажатие
- нг-KeyUp
- нг-MouseDown
- нг-MouseEnter
- нг-MouseLeave
- нг-MouseMove
- нг-Mouseover
- нг-MouseUp
- нг-паста
Резюме
- Директивы Events используются в Angular для добавления пользовательского кода для реагирования на события, генерируемые пользовательским вмешательством, такими как нажатия кнопок, нажатия клавиш клавиатуры и мыши и т. Д.
- Самая распространенная директива события — это директива ng-click, которая используется для обработки событий щелчка. Чаще всего это используется для нажатия кнопок, когда можно добавить код для ответа на нажатие кнопки.
- Элементы HTML также могут быть скрыты или показаны пользователю соответственно с помощью угловых атрибутов ng-show и ng-hide.