Run jQuery after Angular is done loading

Question

I'm writing some code to slightly modify an existing website.

The existing website is built with Angular. My code is using jQuery, but I can use any JavaScript.

However, I cannot change the existing website. I cannot change the existing Angular scripts. I can change my one external script file that is a src on the site. My code is running after the Angular scripts and jQuery scripts have been loaded.

How can I have my jQuery code run after Angular is done rendering the DOM?

$(document).ready() fires to early.

I've never used Angular, but reading online, it looks like it should emit a $viewContentLoading event, however I have not been able to capture this event in my script.

Thanks,

Answer 1

You are correct. You need to wait for the DOM to load before attempting to run any jQuery!

The easy- and unsafe- way to do it is to use $timeout in angualrjs. See the doc here .

$timeout(function() {
    //your jQuery code here
}, 50);

This is telling angualrJs to wait 50 milliseconds then execute whatever is inside the function. 50 milliseconds should be enough time- but you might have to increase it if your page loads slow.

There is a better way!

You should look into directives to avoid using jQuery.