CODEWITHSUNDEEP
javascriptangularjs
user4522478
user4522478

Reputation:

How does ng-cloak work?

I've been looking at the ng-cloak source code

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngCloak.js

It looks like it strips away the ng-cloak attribute during the compile phase of the directive. But when when I try

console.log(element.html())

during the compile function of a directive, the expressions have still not been evaluated, so I get an output like

<my-directive ng-cloak> {{foo}} </my-directive>

Given that ng-cloak will remove the ng-cloak attribute and the corresponding display:none, wouldn't it show {{foo}}? I'm confused here. Whend do Angular expressions get evaluated? It doesn't look like it gets evaluated in the compile function. When is the DOM updated?

Upvotes: 2

Views: 3639

Answers (3)

Asm Sorin
Asm Sorin

Reputation: 1

ng-cloak also fixes the two times click bug for ng-click reverse. Once listed this instruction will fix the issue in witch the button with ng-click reverse instruction needs two clicks in order to execute.

Upvotes: 0

m59
m59

Reputation: 43755

Angular will interpolate the bindings at the end of the $digest cycle so that all of the other modifications have already completed. If they were processed earlier, a directive might later change the binding or scope and cause the DOM to be out-of-date.

You can decorate the $interpolate service so that you can log when Angular interpolates a binding:

.config(function($provide){
    $provide.decorator("$interpolate", function($delegate){
      function wrap() {
        var x = $delegate.apply(this, arguments);
        if (x) {
          var binding = arguments[0];
          return function() {
            var result = x.apply(this, arguments);
            console.log('binding:', binding, result);
            return result;
          }
        }
      }
      angular.extend(wrap, $delegate);
      return wrap;
    });
})

You can then see that all of the directives have been processed and finally, the $interpolate service is called and the DOM is modified accordingly.

Click here for live demo.

Upvotes: 0

Marco Feregrino
Marco Feregrino

Reputation: 663

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.

The directive can be applied to the 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.

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).

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

Example index.html

<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" class="ng-cloak">{{ 'world' }}</div>

things.js

it('should remove the template directive and css class', function() {
 expect($('#template1').getAttribute('ng-cloak')).
toBeNull();
 expect($('#template2').getAttribute('ng-cloak')).
toBeNull();});

Or you can use in other way 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:

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

Angularjs - ng-cloak/ng-show elements blink

Upvotes: 4

Related Questions