Render delay with Angular + jQuery

Question

Some jQuery functions or Angular directives are not loaded or rendered on page loading.

At various points of the APP I had to apply the timeout to work everything normally.

I’m currently loading the angular this way, and right below I load the jquery, was the only solution for it to work, even if with timeout:

angular.element(document).ready(function(){
    angular.bootstrap(document, ['app']);

        jQuery(function($){
            $(window).load(function(){
                if($("‪#‎selection‬").length)
                    $(".languages").show();

What is the right way to use both at the same time and render everything without needing timeout?

Answer 1

This is a very common doubt, the angular actually renders page and directive elements without having loaded some elements, this is normal. To correct this, there is a directive of the angular core itself called ngCloak, you can see how to use here in the documentations: https://docs.angularjs.org/api/ng/directive/ngCloak

It is necessary to note that you need to include css to disappear elements with the ngCloak attribute as stated in the directive specification.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}