jQuery and AngularJS: Bind Events to Changing DOM

Question

In my DOM in AngularJS, I am using an ng-include inside a ng-repeat directive. It is loading the HTML just fine. Anyway, an issue I have is that I\'m using JQuery (latest ve

Answer 1

This question has already been nicely answered by Christian Stewart, but I just wanted to add something to his response.

I use the following code, and add the "cssClickableIcon" class to my buttons, so that when the user clicks on a button (or a div control), it shrinks inwards slightly.

It's a little tweak, but has a really nice effect on a webpage. You really feel as though the webpage is more interactive, rather than flat, and that you have clicked on the control.

//  Make the buttons "bounce" when they're clicked on
$('body').on("mousedown", ".cssClickableIcon", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".cssClickableIcon", function (e) {
    $(this).css("transform", "");
});

Because this uses jQuery's on function, this does work with buttons or other DOM elements created by an AngularJS ng-repeat command.

And, of course, if you're using Bootstrap's own button CSS classes, you can easily add this effect across all of your Bootstrap/Angular buttons using this:

$('body').on("mousedown", ".btn", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".btn", function (e) {
    $(this).css("transform", "");
});

I love this effect so much, and it's such a simple thing to add !

Update

Christian Stewart suggested using CSS instead of jQuery, and he's absolutely right...

So, you can achieve the same effect using just this simple CSS:

.btn:active {
    transform: scale(0.9);
}