One of the things that I enjoy about working with WordPress is the ability to bring in third-party libraries and tools with which to work.
This doesn’t mean they don’t come without their learning curve (they all do, right?), but it’s often fun – albeit frustrating, at times – to incorporate and then manipulate what you’re doing.
As far as third-party technologies go, I’ve seen people bring things in such as the Laravel Illuminate package with WordPress.
But once you understand the markup and how Angular handles its events, it’s not so bad.
Triggering Angular Events with jQuery
Angular works a bit differently than jQuery in how it interacts with the DOM whenever an event happens.
- select elements,
- and so on.
With jQuery, we’re used to doing something like this:
- find the element on which we want to operate either via ID, class name, or some other attribute,
- listen for an event,
- respond appropriately.
Because of some of the newer features of jQuery, we’re able to define custom events and then setup listeners and handle them appropriately but the general behavior is still the same.
Angular works a bit differently, though.
To keep it straightforward (because remember, I’m just trying to walk through the practical process of triggering Angular events with jQuery), Angular has markup much like any standard HTML document with an exception.
Namely, any Angular-based markup is driven by custom attributes which are prefixed with ng. These tell Angular to listen for certain events when they happen and, when they do, to take action.
For example, if there’s an attribute on an element that looks like this:
Then it means whenever the change event is triggered, Angular needs to fire the appropriate handler and do whatever it needs to do to make sure that the data is handled properly.
But this is where the original question lies: How can we trigger Angular events with jQuery?
A Little Set-Up
Before getting into how to do this, I want to create some sample code that’s based in Angular so we’re on the same page with regard to what I’m talking about:
In short, this is a select element with a number of options. The goal is to two-fold:
- programmatically change the value using jQuery,
- send the information using native Angular functions.
Straightforward enough, right? Sure, but there are a few things worth noting and I’ll cover those in the next section.
Now To jQuery
Now, let’s say that we’re going to do something with the select elements but we aren’t going to be using Angular. Instead, we’re going to be using jQuery.
But because of the way the solution has been built, Angular waits for a change event to be triggered on the DOM so that the framework can do its thing. But jQuery works differently, right? Instead, it takes the event, uses the subscriber we’ve set up, and then handles it.
This is where our work with triggering Angular events with jQuery comes into play. To be clear, it’s not as simple as calling code via jQuery like this:
Instead, we can set the value with jQuery but then we need to use Angular to trigger the proper event handler. It’s still the change event, but how we do it is different.
In the following code, you’ll see where I’m changing the select element to set its second option as the selected option and then instruct Angular to do its thing by triggering the change event to which the element is bound.
As you can see, there’s not that’s much that’s different; however, rather than calling trigger on the element via jQuery, we use the API provided by Angular. And that’ll take care of it.
Judiciously Using Such Techniques
I’m no Angular expert (nor have I claimed to be), but when it comes to working with a heavily modified custom, third-party solution and the tools I have at my disposal along with the constraints of time and budget, it’s helpful to know how to handle these things.
So perhaps this will be of help to you in a future project.