Запуск событий Angular с помощью jQuery

Последнее обновление Авг 9, 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