Angularjs - ng-cloak/ng-show elements blink

Asked
Active3 hr before
Viewed126 times

7 Answers

angularjselements
90%

I have an issue in angular.js with directive/class ng-cloak or ng-show.,Add an additional ng-show rule to your element:,Tried ng-cloak but still brief blinks. Below code rid them completely.,Stack Overflow em Português

Though the documentation doesn't mention it, it might not be enough to add the display: none; rule to your CSS. In cases where you are loading angular.js in the body or templates aren't compiled soon enough, use the ng-cloak directive and include the following in your CSS:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\: cloak], [ng - cloak], .ng - cloak {
   display: none!important;
}

As mentioned in the comment, the !important is important. For example, if you have the following markup

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak'ed element

.nav > li > a {
   display: block;
}
load more v
88%

I have an issue in angular.js with directive/class ng-cloak or ng-show.,I'm using ng-show in a directive to show and hide popups.,Works with Firefox 45.0.1,source: https://docs.angularjs.org/api/ng/directive/ngCloak

Example:

<ul ng-show="foo != null" ng-cloak>..</ul>
load more v
72%

The ngCloak directive is used to prevent the AngularJS 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.,The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.,For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application., - directive in module ng

ngCloak works in cooperation with the following css rule embedded within angular.js and angular.min.js. For CSP mode please add angular-csp.css to your html file (see ngCsp).

[ng\: cloak], [ng - cloak], [data - ng - cloak], [x - ng - cloak], .ng - cloak, .x - ng - cloak {
   display: none!important;
}
load more v
65%

Angular.js, ng-cloak, Flickering, WebApps, Web development, ,Web Components in Angular.js,Here if you include rule display:none; the bootstraps rule will take precedence and thus we will see the flickering before the template compiles.,Suppose you are using bootstrap.css then the following selector is important for your ng-cloak element.

This is a common issue you will see on most QA sites on the internet. The flickering issue seems to happen only when Angular.js script is running on Firefox browser or Safari and not on Chrome. This is probably because the Firefox compiler is a little slow thus causing the elements to appear for a while and then hide. Some answers suggest that this could be caused by two issues. Ng-cloak is applied late. If angular.js in the body or templates aren’t compiled soon enough and its in the templates or body. Second problem is ng-cloak is removed too soon. In the case of first problem i.e. angular.js in the body or templates are compiled too late use the ng-cloak directive and include the following lines in your CSS.

/* 
  Allow angular.js
to be loaded in body, hiding cloaked elements until 
  templates compile.
 The !important is important given that there may be 
  other selectors
that are more specific or come later and might alter display.  
 */
[ng\: cloak], [ng - cloak], .ng - cloak {
   display: none!important;
}
load more v
75%

Angular provides the ng-cloak directive to try and hide the element it cloaks so that you don’t see the flash of these markup expressions when the page initially loads before Angular has a chance to render the data into the markup expressions.,This is is meant to initially hide any elements that contain the ng-cloak attribute or one of the other Angular directive permutation markup. Unfortunately on this particular web page ng-cloak had no effect – I still see the flicker.,Then once Angular has run its initialization and effectively processed the template markup on the page you can show the content. For Angular this ‘ready’ event is the app.run() function:,ng-cloak works by temporarily hiding the marked up element and it does this by essentially applying a style that does this:

Angular provides the ng-cloak directive to try and hide the element it cloaks so that you don’t see the flash of these markup expressions when the page initially loads before Angular has a chance to render the data into the markup expressions.

<div id="mainContainer" class="mainContainer boxshadow" ng-app="app" ng-cloak>

ng-cloak works by temporarily hiding the marked up element and it does this by essentially applying a style that does this:

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

This style is inlined as part of AngularJs itself. If you looking at the angular.js source file you’ll find this at the very end of the file:

!angular.$$csp() && angular.element(document)    .find('head')    .prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],' +             '[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,' +              '.ng-hide{display:none !important;}ng\\:form{display:block;}'             '.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}' +              '</style>');

For example you can turn:

<div class="list-item-name listViewOrderNo">
    <a href='#'>{{lineItem.MpsOrderNo}}</a>
</div>
<div class="list-item-name listViewOrderNo">
   <a href="#" ng-bind="lineItem.MpsOrderNo"></a>
</div>

I use the minimal:

[ng - cloak] {
   display: none!important;
}

which works for:

<div id="mainContainer" class="mainContainer dialog boxshadow" ng-app="app" ng-cloak>

You can manually hide the content and make it visible after Angular has gotten control. To do this I used:

<div id="mainContainer" class="mainContainer boxshadow" ng-app="app" style="display:none">

Then once Angular has run its initialization and effectively processed the template markup on the page you can show the content. For Angular this ‘ready’ event is the app.run() function:

app.run(function($rootScope, $location, cellService) {
   $("#mainContainer").show();…
});
load more v
40%

AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed. Use the ng-cloak directive to prevent this.,The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded.,Prevent the application from flicker at page load:,If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

load more v
22%

I have an issue in angular.js with directive/class ng-cloak or ng-show.,Chrome works fine, but Firefox is causing blink of elements with ng-cloak or ng-show. IMHO it's caused by the converting ng-cloak/ng-show to style="display: none;", probably the Firefox javascript compiler is little bit slower, so the elements appears for a while and then hide?,and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak'ed element,As mentioned in the comment, the !important is important. For example, if you have the following markup

Example:

<ul ng-show="foo != null" ng-cloak>..</ul>
load more v

Other "angularjs-elements" queries related to "Angularjs - ng-cloak/ng-show elements blink"