在AngularJS中加载页面后触发jQuery函数

Question

I just started learning AngularJS and I'm not really familiar with the terminologies in AngularJS yet. Here's my concern, I created a Loading Animation that shows up when I go to pages, but then I want to stop the Loading Animation as soon as all the contents of the pages has loaded. It's fairly easy to do in plain jQuery since I can just trigger $(window).load() but it doesn't seem to work in angular. $(document).ready() seems to work but that's not what I actually need since it gets triggered even though the images are not finished loading yet. I already tried $scope.init inside my controller as well as $window.onload inside my controller but I still can't make it work.

Answer 1

Hotfix answer

Actually you do not need to wait for any of these events in angular. Just use $().. in your angular controller - the site was already loaded. (similar to the window.load() event. In case jquery does not find the html elements please try to wrap it with $timeout( function() { ... } );

Recommendation

Please do not! There are angular ways to animate stuff which fits better than crazy $('#id'). logic. This will break in growing applications.

Answer 2

I would recommend you forget about jQuery when you are working on AngularJS application. So figure out how to work everything out in AngularJS way - move all jQuery logic that you have to angular controller and avoid direct DOM manipulation (jQuery way).

Also, there's a good tutorial online if you are moving to AngularJS from jQuery:

https://gabrieleromanato.name/introduction-to-angularjs-for-jquery-developers

If you need a solution for switching pages go with ui-router - it will give you even more flexibility with loading pages and resolving properties for different pages:

https://github.com/angular-ui/ui-router

And in this particular case you can use simple boolean property on $scope and show preloader div based on that:

<div ng-show="showOverlay" class="loader" />

then inside your controller you could put something like:

$scope.showOverlay = true;

and then after your page logic is loaded and promises are resolved you could just hide that preloader with:

$scope.showOverlay = false;

To illustrate I created simple fiddle with preloader for you. Also keep in mind there are tons of different ways of implementing this but this is simple one that should work for almost any case:

https://jsfiddle.net/pegla/ng1mn8qp/3/

There's also one answer here on stack overflow that could help you:

How to execute angular controller function on page load?