Wyzwalanie zdarzeń kątowych za pomocą jQuery

Ostatnia aktualizacja gru 7, 2022

Jedną z rzeczy, które lubię w pracy z WordPressem, jest możliwość wprowadzania bibliotek i narzędzi innych firm do pracy.

Nie oznacza to, że nie przychodzą bez krzywej uczenia się (wszyscy tak robią, prawda?), ale często fajnie – choć czasami frustrujące – jest włączanie, a następnie manipulowanie tym, co robisz.

Jeśli chodzi o technologie innych firm, widziałem, jak ludzie wprowadzają takie rzeczy, jak pakiet Laravel Illuminate z WordPress.

I wiem, zwłaszcza w ostatnich latach, wielu wprowadziło komponenty takie jak React i Vue.

W jednym z takich przypadków pracowałem z Angularem. A jeśli jesteś przyzwyczajony do ES6, waniliowego JavaScriptu lub używania jQuery, wyzwalanie zdarzeń Angular za pomocą jQuery może początkowo wydawać się nieco dziwne.

Ale kiedy zrozumiesz znaczniki i jak Angular obsługuje swoje zdarzenia, nie jest tak źle.

Wyzwalanie zdarzeń kątowych za pomocą jQuery

Angular działa nieco inaczej niż jQuery pod względem interakcji z DOM za każdym razem, gdy ma miejsce zdarzenie.

Na przykład załóżmy, że używając jQuery (lub nawet waniliowego JavaScript), mamy stronę, a następnie na tej stronie znajduje się zestaw znaczników, który może zawierać różne elementy. Mogą to być:

nagłówki,
akapity,
etykiety,
wybierz elementy,
i tak dalej.

Z jQuery jesteśmy przyzwyczajeni do robienia czegoś takiego:

znaleźć element, na którym chcemy operować poprzez ID, nazwę klasy lub inny atrybut,
nasłuchiwać wydarzenia,
odpowiednio zareagować.

Ze względu na niektóre nowsze funkcje jQuery jesteśmy w stanie zdefiniować zdarzenia niestandardowe, a następnie skonfigurować detektory i odpowiednio je obsłużyć, ale ogólne zachowanie jest nadal takie samo.

Angular działa jednak nieco inaczej.

Aby zachować prostotę (ponieważ pamiętam, po prostu próbuję przejść przez praktyczny proces wyzwalania zdarzeń Angular za pomocą jQuery), Angular ma znaczniki podobnie jak każdy standardowy dokument HTML z wyjątkiem.

Mianowicie, każdy znacznik oparty na Angularze jest sterowany przez niestandardowe atrybuty, które są poprzedzone ng. Mówią one Angularowi, aby nasłuchiwał pewnych zdarzeń, kiedy się wydarzają, a kiedy to się dzieje, podejmuje działania.

Na przykład, jeśli w elemencie istnieje atrybut, który wygląda tak :

Oznacza to, że za każdym razem, gdy wyzwalane jest zdarzenie zmiany, Angular musi uruchomić odpowiednią procedurę obsługi i zrobić wszystko, co konieczne, aby upewnić się, że dane są obsługiwane prawidłowo.

Ale tutaj leży pierwotne pytanie: jak możemy wywołać zdarzenia Angular za pomocą jQuery?

Mała konfiguracja

Zanim przejdę do tego, jak to zrobić, chcę utworzyć przykładowy kod oparty na Angularze, więc jesteśmy na tej samej stronie w odniesieniu do tego, o czym mówię:

Krótko mówiąc, jest to wybrany element z wieloma opcjami. Celem jest dwojakie:

programowo zmień wartość za pomocą jQuery,
wyślij informacje za pomocą natywnych funkcji Angulara.

Wystarczająco proste, prawda? Jasne, ale jest kilka rzeczy, na które warto zwrócić uwagę i omówię je w następnej sekcji.

Teraz do jQuery

Załóżmy teraz, że zamierzamy zrobić coś z wybranymi elementami, ale nie będziemy używać Angulara. Zamiast tego będziemy używać jQuery.

Ale ze względu na sposób, w jaki zostało zbudowane rozwiązanie, Angular czeka na wyzwolenie zdarzenia zmiany w DOM, aby framework mógł wykonać swoje zadanie. Ale jQuery działa inaczej, prawda? Zamiast tego przyjmuje zdarzenie, wykorzystuje skonfigurowanego przez nas subskrybenta, a następnie go obsługuje.

W tym momencie w grę wchodzi nasza praca z wyzwalaniem zdarzeń Angular za pomocą jQuery. Żeby było jasne, nie jest to tak proste, jak wywoływanie kodu przez jQuery w ten sposób :


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

Zamiast tego możemy ustawić wartość za pomocą jQuery, ale następnie musimy użyć Angulara, aby wyzwolić odpowiednią obsługę zdarzeń. To wciąż wydarzenie zmiany, ale sposób, w jaki to robimy, jest inny.

W poniższym kodzie zobaczysz, gdzie zmieniam element select, aby ustawić jego drugą opcję jako wybraną opcję, a następnie poinstruuję Angular, aby wykonał swoje zadanie, wyzwalając zdarzenie change, z którym element jest powiązany.


$('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');
});

Jak widać, niewiele się różni; jednak zamiast wywoływać wyzwalacz na elemencie za pośrednictwem jQuery, używamy API dostarczanego przez Angular. I to się tym zajmie.

Rozsądne korzystanie z takich technik

Nie jestem ekspertem Angular (ani nie twierdziłem, że jestem), ale jeśli chodzi o pracę z mocno zmodyfikowanym niestandardowym rozwiązaniem innej firmy i narzędziami, które mam do dyspozycji wraz z ograniczeniami czasu i budżetu, jest to pomocne wiedzieć, jak sobie z tym poradzić.

Być może więc pomoże ci to w przyszłym projekcie.

Źródło nagrywania: tommcfarlin.com