При создании веб-приложений рано или поздно вашему приложению потребуется обрабатывать события DOM, такие как щелчки мыши, движения, нажатия клавиатуры, события изменения и т. Д.
AngularJS может добавлять функции, которые можно использовать для обработки таких событий.
Например, если на странице есть кнопка, и вы хотите обработать что-либо при нажатии кнопки, мы можем использовать директиву события ng-click.
Мы подробно рассмотрим директивы событий во время этого курса.
В этом руководстве вы узнаете:
- Что такое директива ng-click?
- Что такое директива ng-show?
- Что такое директива ng-hide?
Что такое директива ng-click?
«Нг-клик директива» используется для применения пользовательского поведения, когда элемент в HTML щелкнул. Обычно это используется для кнопок, потому что это наиболее распространенное место для добавления событий, которые реагируют на щелчки, выполненные пользователем.
Давайте рассмотрим простой пример того, как мы можем реализовать событие щелчка.
В этом примере у нас будет переменная счетчика, значение которой будет увеличиваться, когда пользователь нажимает кнопку.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Пояснение к коду:
- Сначала мы используем директиву ng-init, чтобы установить значение счетчика локальной переменной равным 0.
- Затем мы вводим для кнопки директиву события ng-click. В этой директиве мы пишем код для увеличения значения переменной count на 1.
- Здесь мы показываем пользователю значение переменной count.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Из приведенного выше вывода
- Мы видим, что отображается кнопка «Приращение» и значение счетной переменной изначально равно нулю.
- Когда вы нажимаете кнопку «Увеличить», значение счетчика увеличивается соответственно, как показано на выходном изображении ниже.
Что такое директива ng-show?
Директива ng-Show используется для отображения или скрытия данного HTML-элемента на основе выражения, предоставленного атрибуту ngShow. В фоновом режиме элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide к элементу.
В фоновом режиме элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide к элементу.
Давайте посмотрим на пример того, как мы можем использовать директиву «ngshow event» для отображения скрытого элемента.
Event Registration Guru99 Global Event
Angular
Пояснение к коду:
- Мы прикрепляем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию под названием «ShowHide», которая определена в нашем контроллере - DemoController.
- Мы прикрепляем атрибут ng-show к тегу div, который содержит текст Angular. Это тег, который мы собираемся показать / скрыть на основе атрибута ng-show.
-
В контроллере мы присоединяем переменную-член «IsVisible» к объекту области видимости. Этот атрибут будет передан в атрибут angular 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 элемент будет скрыт, если выражение истинно. Если Выражение ЛОЖЬ, элемент будет показан. В фоновом режиме элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide к элементу.
С другой стороны, с ng-hide элемент скрыт, если выражение истинно, и будет показано, если оно ложно.
Давайте посмотрим на пример, аналогичный показанному для ngShow, чтобы продемонстрировать, как можно использовать атрибут ngHide.
Event Registration Guru99 Global Event
Angular
Пояснение к коду:
- Мы прикрепляем директиву события ng-click к элементу кнопки. Здесь мы ссылаемся на функцию под названием ShowHide, которая определена в нашем контроллере - DemoController.
- Мы прикрепляем атрибут ng-hide к тегу div, который содержит текст Angular. Это тег, который мы собираемся показать / скрыть на основе атрибута ng-show.
- В контроллере мы присоединяем переменную члена isVisible к объекту области видимости. Этот атрибут будет передан в атрибут angular ng-show для управления видимостью элемента управления div. Первоначально мы устанавливаем это значение в false, чтобы при первом отображении страницы тег div был скрыт.
- Мы добавляем код в функцию ShowHide, которая установит для переменной-члена IsVisible значение true, чтобы тег div мог быть показан пользователю.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
На выходе
- Изначально вы можете видеть, что тег div с текстом «AngularJs» изначально отображается, потому что значение свойства false отправляется в директиву ng-hide.
- Когда мы нажимаем кнопку «Hide Angular», значение свойства true будет отправлено в директиву ng-hide. Следовательно, будет показан следующий результат, в котором слово "Angular" будет скрыто.
Директивы прослушивателя событий AngularJS
Вы можете добавить слушателей событий AngularJS к своим HTML-элементам, используя одну или несколько из этих директив:
- нг-размытие
- нг-изменение
- нг-щелчок
- нг-копия
- нг-срез
- ng-dblclick
- нг-фокус
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- нг-паста
Резюме
- Директивы событий используются в Angular для добавления настраиваемого кода для реагирования на события, генерируемые вмешательством пользователя, такие как нажатия кнопок, щелчки клавиатуры и мыши и т. Д.
- Самая распространенная директива событий - это директива ng-click, которая используется для обработки событий щелчка. Чаще всего это используется для нажатия кнопки, когда можно добавить код для ответа на нажатие кнопки.
- HTML-элементы также могут быть скрыты или показаны пользователю соответственно с помощью угловых атрибутов ng-show и ng-hide.