3

I've looked at the documentation on the Angular site here but I'm still a little bit confused.

I have an angular directive who's template contains elements created by ng-repeat. Each of these elements has a common class. I'm trying to select those elements by class so that I can pass a handler when an event is triggered on an element belonging to that class.

As far as I can tell from the answer here I have the option of selecting those elements with jqLite or angular.element(). My jQuery is included AFTER Angular is included. I assume that this should be done this way because I want to select elements of a specific class AFTER Angular has produced them through my directive.

I'm not actually trying to use the .click() event on the class, it's just a proof of concept. I have the following code in the controller associated with the containing element of the directive:

$(".gallery-image").click(function(){
        alert("test");
});

What I'm attempting to do should be fairly apparent, I'm just unsure how to deal with this cocktail of Angular and jQuery.

How would I select and run an event handler with jQuery on these elements?

Community
  • 1
  • 1
Allenph
  • 1,875
  • 27
  • 46

2 Answers2

6

Use it like this

$(document).on("click", ".gallery-image", function(){
        alert("test");
});

you cannot select directly on ".gallery-image" because there is none of them are on page in the moment when you bind click event on to them

But you always can use ng-click directive on items in ng-repeat you don't need to use jQuery to bind click event.

Aleksandar Gajic
  • 1,349
  • 1
  • 18
  • 23
  • Like I mentioned in my post, `.click()` was just a placeholder. I don't want to use CSS3 for a number of reasons, and I'm going to use jQuery's `.animate()` method. This code works perfectly. I'm unsure exactly why it does, though. We're selecting the document with jQuery then selecting a DOM element belonging to it. The `.click()` method is specifically mentioned in the jQuery documentation as being equivilent to your `.on()` method. How is this any different? – Allenph Jul 31 '15 at 09:37
  • 1
    @Allenph [Event Delegation & Propagation](http://learn.jquery.com/events/event-delegation/) – Oka Jul 31 '15 at 09:40
  • Yes but with one big difference, .on() bind events on "live", so if you add new DOM elements it will bind event to them, but when you use only .click() you bind event only to elements that are on page at the moment. you can find more explanation on here http://api.jquery.com/on/ Delegated events – Aleksandar Gajic Jul 31 '15 at 09:41
  • @AleksandarGajic, so then we could use the `.on()` method without the selector, and simply select the element by class. I.E. `$("#className").on("click", function(){});`? – Allenph Jul 31 '15 at 09:51
  • @AleksandarGajic nice! – Paul Fitzgerald Aug 12 '16 at 08:53
0

If you load jQuery after Angular, the angular.element keeps as the simplified version of jQuery: jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file.

So you need to load jQuery first. You can check on the console through angular.element === jQuery.

If you contain ng-repeat, always use $timeout to wait for the rendering finishes. Then you can access the elements.

But of course, whenever possible, always use ng-click instead of .on('click',....

Joy
  • 9,430
  • 11
  • 44
  • 95