CODEWITHSUNDEEP
angularjs
JayPrime2012
JayPrime2012

Reputation: 2692

AngularJS - how do you know when angular has finished processing a page?

How to know when all interpolation and processing on a given page has been completed?

            compile: function (tElement, tAttrs) {
                return function (scope, element, attrs) {
                    element.html(tpl);
                    $compile(element.contents())(scope);
                };
            },

This is not synchronous. If there are {{stuff}} and ng-repeat="..." etc... they will not all be guaranteed to be completed when the link function returns.

I need a way to know when the page has rendered and there's no more directives to process so that I can then use #hashes to navigate to elements created on the page by angular. (using $anchorScroll)

Upvotes: 0

Views: 613

Answers (2)

Saad Bin Shahid
Saad Bin Shahid

Reputation: 344

There is a directive in angular for this very specific reason ; ngCloak.

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Doc @ https://docs.angularjs.org/api/ng/directive/ngCloak

Similar Question on Quora; How do I hide a div with AngularJS until ng-repeat has finished processing? @ https://www.quora.com/How-do-I-hide-a-div-with-AngularJS-until-ng-repeat-has-finished-processing

enter image description here

This is another way to do it, but I prefer to use angular directive.

<li ng-repeat="opt in menuItems" my-custom-repeat-listener> </li>

and then on the directive something sort of like

if(scope.$last) { /*fire event or etc to show the list items*/ }

Upvotes: 0

lukpaw
lukpaw

Reputation: 1613

Maybe try this:

$scope.$on('$viewContentLoaded', function() {
  // ....
});

Upvotes: 1

Related Questions