How can I run jQuery code in AngularJS?

Question

I have this AngularJS code:

                promise.then(function(data) {   
                    $scope.data = data;
                    $scope.hasData = (data.length > 0);

                    // Do jQuery code here
                },

As you can see, a promise has been fulfilled (some API data has finished downloading). Only once this data finishes downloading, I want to run some jQuery (I want the page to automatically start scrolling to the bottom over say 60 seconds).

How can I nicely do this? I understand it's not good practice to include jQuery code in the middle of AngularJS code (maybe something about the dollar signs being used by both?) but I'm not sure how to get around it.

Any advice appreciated, thank you.

EDIT:

This is the jQuery code I'll use:

        // Scroll up, then scroll down
        var intervalTime = 60000;
        $('html, body').animate({ scrollTop : 0}, 800);
        $("html, body").animate({ scrollTop: $('html, body').get(0).scrollHeight }, { duration: (0.75 * intervalTime) });

You can use angular.element: docs.angularjs.org/api/ng/function/angular.element. This is a wrapper to jQuery, so I don't think it's a bad practice to put jQuery animations code inside AngularJS — Michael
– Michael, Commented Nov 13, 2014 at 10:17
Do you have an example of angular.element being used? That documentation page is light on the examples! Cheers. I've edited the top post with my jQuery. — b85411
– b85411, Commented Nov 13, 2014 at 10:21

sp00m · Accepted Answer · 2014-11-13 10:28:08Z

1

You could use the ngAnimate module:

In your view:

<div ng-class="{scrollToBottom: promiseExecuted}">...</div>

In your controller:

promise.then(function(data) {   
    $scope.data = data;
    $scope.hasData = data.length > 0;
    $scope.promiseExecuted = true;
});

Then your animation:

app.animation(".scrollToBottom", function() {
    var intervalTime = 60000;
    return {
        addClass: function(element, className, done) {
            $("html, body").animate({ scrollTop : 0 }, 800);
            $("html, body").animate({ scrollTop: $("html, body").get(0).scrollHeight }, { duration: (0.75 * intervalTime) });
        }
    };
});

answered Nov 13, 2014 at 10:28

sp00m

49k31 gold badges152 silver badges262 bronze badges

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

3 Comments

b85411 Over a year ago

Ah this looks so elegant - but it's not working! Does it matter that I have my code like this angular.module('application', []) .animation('.scrollToBottom', function() { ... instead of having it as a var app = ....? And does the order matter? ie. Can "animation" be the first function, or does "controller", etc need to come first? Thanks

sp00m Over a year ago

@b85411 I guess you forgot to load the module, see the "Installation" section at the end of the ngAnimate module documation. Chaining does not matter, nor the declaration order (AFAIK).

b85411 Over a year ago

Thank you! Good pick up, I hadn't loaded the ngAnimate module. You deserve a million up-votes, because I have not been able to find anything on StackOverflow as concise and elegant as the solution you put above.

Collectives™ on Stack Overflow

How can I run jQuery code in AngularJS?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related