Директиви AngularJS ng-click, ng-show і ng-hide

Події AngularJS

Події AngularJS – це функції, які дозволяють веб-застосункам взаємодіяти з вводом користувача, таким як клацання миші, введення з клавіатури та наведення курсора миші. Події повинні оброблятися у веб-застосунках для виконання певних завдань та дій, і кожна з них запускається, коли користувач виконує відповідну дію.

Під час створення вебзастосунків рано чи пізно вашій програмі потрібно обробляти події DOM, такі як клацання та переміщення миші, натискання клавіш та події змін. AngularJS надає директиви, які декларативно обробляють ці події.

Наприклад, якщо кнопка на сторінці має обробляти щось при натисканні, директива події ng-click забезпечує цей перехоплювач.

⚠️ Повідомлення служби підтримки: Досягнуто AngularJS кінець терміну служби 31 грудня 2021 року і не отримує жодних подальших виправлень чи виправлень безпеки від команди Angular. Наведені нижче директиви залишаються точними для підтримки існуючих програм AngularJS 1.x; для нової роботи використовуйте сучасні Angular, де ці директиви замінюються прив'язками подій, такими як (click) і *ngIf.

Що таке директива ng-click в AngularJS?

Команда «Директива ng-click» В AngularJS застосовується власна поведінка при натисканні на елемент HTML. Зазвичай вона використовується на кнопках, оскільки це найпоширеніше місце для прикріплення відповідей на клік, а також використовується для виклику сповіщень про клік.

Синтаксис ng-click в AngularJS

<element
 ng-click="expression">
</element>

Приклад ng-click в AngularJS

У цьому прикладі ng-click змінна лічильника збільшується щоразу, коли користувач натискає кнопку.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Пояснення:

1. Директива ng-init встановлює локальну змінну count в 0.
2. Директива ng-click на кнопці збільшує значення count на 1 за кожен клік.
3. Інтерполяція {{count}} відображає поточне значення користувачеві.

вихід:

Відображається кнопка «Збільшити», і лічильник спочатку дорівнює нулю. Натискання на неї збільшує значення, як показано на зображенні нижче.

Що таке директива ng-show в AngularJS?

Команда Директива ng-show показує або приховує задане HTML елемент на основі виразу, переданого атрибуту ng-show. Внутрішньо елемент відображається або приховується шляхом видалення або додавання .ng-hide CSS-клас, попередньо визначений клас, який встановлює display до none.

Синтаксис ng-show в AngularJS

<element
 ng-show="expression">
</element>

Приклад ng-show в AngularJS

У цьому прикладі використовується ng-show для відображення прихованого елемента.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Пояснення:

1. Директива ng-click на кнопці посилається на ShowHide функція, визначена в контролері DemoController.
2. Атрибут ng-show додається до div, що містить текст Angular. Це елемент, видимість якого контролюється.
3. У контролері, IsVisible Змінна-член розміщується на об'єкті області видимості та ініціалізується як false, тому div приховується під час першого завантаження сторінки. За допомогою ng-show значення правда відображає елемент і false приховує це.
4. Команда ShowHide набори функцій IsVisible значення true, щоб div став видимим.

вихід:

Div, що містить текст, спочатку не відображається, оскільки IsVisible починається як хибне. Клацання Показати кутовий встановлює значення «true», і текст стає видимим.

Що таке директива ng-hide в AngularJS?

Команда директива ng-hide приховує елемент, коли його вираз має значення TRUE, та показує елемент, коли вираз має значення FALSE — повна інверсія до ng-show. Внутрішньо він використовує те саме .ng-hide Клас CSS.

Синтаксис ng-hide в AngularJS

<element
 ng-hide="expression">
</element>

Приклад ng-hide в AngularJS

Цей приклад відображає приклад ng-show, тому дві директиви можна порівняти безпосередньо.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code Пояснення:

1. Директива ng-click на кнопці посилається на ShowHide функція в DemoController.
2. Команда ng-hide Атрибут прикріплюється до div, що містить текст Angular.
3. IsVisible ініціалізується до falseОскільки це ng-hide, а не ng-show, значення false означає, що div видимий коли сторінка вперше завантажується.
4. Команда ShowHide набори функцій IsVisible до значення true, що приховує div.

вихід:

Спочатку відображається div, оскільки до ng-hide передається значення false. Клацання Приховати кутовий стає істинним, і слово зникає.

ng-show проти ng-hide проти ng-if: ключові відмінності

Три директиви контролюють, чи бачить користувач елемент, і вибір між ними впливає як на поведінку, так і на продуктивність рендерингу. Перші дві лише перемикають клас CSS, тому елемент завжди присутній на сторінці; третя додає та видаляє сам елемент.

Використовуйте ng-show або ng-hide, коли елемент часто перемикається, оскільки елемент ніколи не перебудовується, а перемикання коштує лише зміни класу. Використовуйте ng-if для ресурсомістких секцій, які відображаються рідко, оскільки видалення елемента також видаляє його спостерігачі та зменшує вартість дайджесту на кожному циклі.

Директиви слухача подій AngularJS

Ви можете додати слухачі подій AngularJS до елементів HTML, використовуючи один або декілька з цих директиви:

• нг-розмиття
• ng-зміна
• ng-клацніть
• ng-копія
• нг-вирізати
• ng-dblclick
• нг-фокус
• ng-клавіатура
• ng-клавіатура
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-наведення миші
• ng-mouseup
• нг-паста
• ng-подати

Кожна директива приймає вираз, а необроблена подія браузера доступна всередині нього як $event коли обробнику потрібні такі деталі, як натиснута клавіша або координати кліку.

Поширені запитання