Question

我一直在看ng-cloak源代码

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

看起来它在指令的编译阶段剥去了ng-cloak属性。但是当我尝试的时候

console.log(element.html())

在指令的编译功能期间，表达式仍然没有被评估，所以我得到了像

这样的输出

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

鉴于ng-cloak将删除ng-cloak属性和相应的display：none，它是否会显示{{foo}}？我在这里很困惑。是否会评估Angular表达式？它看起来不像在编译函数中得到评估。 DOM何时更新？

Answer 1

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

该指令可以应用于元素，但首选用法是将多个ngCloak指令应用于页面的一小部分，以允许逐步呈现浏览器视图。

ngCloak与angular.js和angular.min.js中嵌入的以下css规则配合使用。对于CSP模式，请将angular-csp.css添加到您的html文件中（参见ngCsp）。

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

示例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();});

或者你可以用其他方式使用它可能不足以添加display：none;统治你的CSS。如果你在body中加载angular.js或模板编译得不够快，请使用ng-cloak指令并在CSS中包含以下内容：

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

Angularjs - ng-cloak/ng-show elements blink

Answer 2

Angular会在$digest周期结束时插入绑定，以便所有其他修改都已完成。如果先前处理它们，则指令可能稍后更改绑定或范围并导致DOM过期。

您可以修饰$interpolate服务，以便在Angular插入绑定时进行记录：

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

然后您可以看到所有指令都已处理完毕，最后调用$ interpolate服务并相应地修改DOM。

Click here for live demo.

Answer 3

ng-cloak还修复了两次单击错误以进行ng-click反向修复。一旦列出，该指令将解决问题，按钮点击反向指令需要两次点击才能执行。

ng-cloak如何运作？

3 个答案: