jQuery click combined with AngularJS ng-click not triggering

Question

I have a simple button where I call an ng-click (which works fine) and I would like to call a jQuery click on that same button to trigger some jQuery while doing some angular stuff.

Here's my button

<button type="button" class="btn btn-md updateUser" ng-click="openFormForUpdate(client.id)">{{ __ "Update" }}</button>

Here's the code that is supposed to be triggered but that console.log() is not showing anything.

var hidden = true;
$('.updateUser').click(function(){
    console.log('Form is now open or closed.');
    hidden = !hidden;
    if(hidden === false)
        $('.add-user').show(1000);
    else
        $('.add-user').hide(1000);
});

I'm open to all kind of solution!

Every time the digest cycle happens, you have to re-bind your jquery click event. :) one of the reasons interacting with the dom directly in angular is usually a bad idea. — user400654
– user400654, Commented Apr 16, 2015 at 19:07
Move the jquery code into the angular click handler. HOWEVER: it's very likely that right after that click event, the digest cycle will happen again thus ending your show or hide animation. — user400654
– user400654, Commented Apr 16, 2015 at 19:09
The logic you've provided written in jQuery can be done in angular pretty easily without having to touch the dom directly. ng-show with a hidden flag on client should do it. — user400654
– user400654, Commented Apr 16, 2015 at 19:11

user400654 · Accepted Answer · 2015-04-16 19:16:25Z

1

The Angular way to do this would be to use ng-show or ng-if to show or hide the .add-user element.

<button 
  type="button" 
  class="btn btn-md updateUser" 
  ng-click="openFormForUpdate(client.id); addUserHidden = !addUserHidden">
    {{ __ "Update" }}
</button>
<div 
  class="add-user" 
  ng-if="!addUserHidden">
    ...
</div>

for animations, research ngAnimate, i haven't worked with it much so I can't provide a sample.

answered Apr 16, 2015 at 19:16

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raphaël Parent Over a year ago

Yeah that's what i figured, or something around that. Still pretty new to angular so i'm not used to what it can and can't do! Knowing about ng-show guided me to that codepen codepen.io/SusanneLundblad/pen/dabcw?editors=101

user400654 Over a year ago

Note that i included the logic directly in the template for simplicity, it would be perfectly fine to instead handle it within the controller and click event handler.

Raphaël Parent Over a year ago

Yeah, now that I've got the logic figured out, that is probably what i'll do since it's best practice.

Collectives™ on Stack Overflow

jQuery click combined with AngularJS ng-click not triggering

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related