Запуск подій Angular за допомогою jQuery

Останнє оновлення Гру 7, 2022

Однією з речей, які мені подобаються у роботі з WordPress, є можливість залучати сторонні бібліотеки та інструменти для роботи.

Це не означає, що вони не вчаться (вони всі так роблять, чи не так?), але часто буває весело – хоча часом і розчаровує – включати, а потім маніпулювати тим, що ви робите.

Що стосується сторонніх технологій, то я бачив, як люди впроваджують такі речі, як пакет Laravel Illuminate з WordPress.

І я знаю, особливо в останні роки, багато хто привніс такі компоненти, як React і Vue.

В одному з таких випадків я працював з Angular. І якщо ви звикли до ES6, ванільного JavaScript або використовуєте jQuery, то ініціювання подій Angular за допомогою jQuery спочатку може здатися трохи дивним.

Але як тільки ви зрозумієте розмітку та те, як Angular обробляє свої події, це не так вже й погано.

Запуск подій Angular за допомогою jQuery

Angular працює дещо інакше, ніж jQuery, у тому, як він взаємодіє з DOM щоразу, коли відбувається подія.

Наприклад, припустимо, що за допомогою jQuery (або навіть ванільного JavaScript) у нас є сторінка, а потім на цій сторінці є набір розмітки, який може містити різноманітні елементи. Це можуть бути:

заголовки,
параграфи,
етикетки,
вибрати елементи,
і так далі.

З jQuery ми звикли робити щось подібне:

знайти елемент, з яким ми хочемо працювати через ідентифікатор, ім’я класу чи інший атрибут,
слухати подію,
відповідати належним чином.

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

Однак Angular працює трохи інакше.

Щоб було зрозуміло (тому що пам’ятайте, я просто намагаюся пройти через практичний процес ініціювання подій Angular за допомогою jQuery), Angular має розмітку, як і будь-який стандартний документ HTML, за винятком.

Зокрема, будь-яка розмітка на основі Angular керується спеціальними атрибутами, які мають префікс ng. Вони вказують Angular прислухатися до певних подій, коли вони відбуваються, і, коли вони відбуваються, вживати заходів.

Наприклад, якщо в елементі є атрибут, який виглядає так :

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

Але ось тут і полягає оригінальне запитання: як ми можемо запускати події Angular за допомогою jQuery?

Невелике налаштування

Перш ніж перейти до того, як це зробити, я хочу створити приклад коду на основі Angular, щоб ми були на одній сторінці щодо того, про що я говорю:

Коротше кажучи, це елемент вибору з низкою опцій. Мета полягає в тому, щоб подвійно:

програмно змінити значення за допомогою jQuery,
надсилати інформацію за допомогою власних функцій Angular.

Досить прямолінійно, чи не так? Звичайно, але є кілька речей, які варто відзначити, і я розповім про них у наступному розділі.

Тепер до jQuery

Тепер припустімо, що ми збираємося щось робити з вибраними елементами, але ми не будемо використовувати Angular. Замість цього ми будемо використовувати jQuery.

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

Ось тут і вступає в гру наша робота з ініціюванням подій Angular за допомогою jQuery. Щоб було зрозуміло, це не так просто, як викликати код через jQuery , як це :


$('select['ng-model="item.payment_method"]').trigger('change');

Замість цього ми можемо встановити значення за допомогою jQuery, але тоді нам знадобиться використовувати Angular, щоб запустити правильний обробник подій. Це все ще подія змін, але те, як ми це робимо, відрізняється.

У наступному коді ви побачите, де я змінюю елемент select, щоб встановити його другу опцію як вибрану опцію, а потім наказую Angular виконати свою роботу, викликавши подію зміни, до якої прив’язаний елемент.


$('select[ng-model="schedule.payment_method"]').each(function() {

  // For the purposes of this example, we're going to select the first option.
  $(this)
    .children('option:eq(1)')
    .attr('selected', 'selected');

  // Make sure the select element reflects the change (as setting the option doesn't always do this properly).
  $(this).val($(this).children('option:selected').attr('value'));

  // Now use the Angular API's triggerHandler function to call the change.
  angular.element($(this)).triggerHandler('change');
});

Як бачите, відмінностей не так вже й багато; однак замість того, щоб викликати тригер для елемента через jQuery, ми використовуємо API, наданий Angular. І це подбає про це.

Розумне використання таких прийомів

Я не фахівець з Angular (і не стверджував, що є), але коли справа доходить до роботи з сильно модифікованим спеціальним рішенням третьої сторони та інструментами, які є в моєму розпорядженні, разом із обмеженнями часу та бюджету, це корисно щоб знати, як поводитися з цими речами.

Тож, можливо, це допоможе вам у майбутньому проекті.

Джерело запису: tommcfarlin.com