current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote -1 down vote favorite

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!

share|improve this question
    
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. – Kevin B Apr 16 at 19:07
    
So I should bind it inline? Or how do I do that exactly? – Raphaël Parent Apr 16 at 19:09
    
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. – Kevin B Apr 16 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. – Kevin B Apr 16 at 19:11
    
I'll look into that, thank you! :) – Raphaël Parent Apr 16 at 19:13

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
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 – Raphaël Parent Apr 16 at 19:20
    
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. – Kevin B Apr 16 at 20:51
    
Yeah, now that I've got the logic figured out, that is probably what i'll do since it's best practice. – Raphaël Parent Apr 18 at 15:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.