斗篷是怎么工作的？

Question

我一直在看ng斗篷的源代码

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斗篷将移除ng-斗篷属性和相应的显示:none，它不会显示{{foo}}吗？我在这里很困惑。角表达式是什么时候计算的？它看起来不像在编译函数中得到评估。DOM什么时候更新？

Answer 1

角将在$digest循环结束时插值绑定，以便所有其他修改都已经完成。如果它们被更早地处理，指令可能稍后会更改绑定或作用域，并导致DOM过时。

您可以装饰$interpolate服务，以便在角插值绑定时进行日志记录：

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

ngCloak指令用于防止浏览器在加载应用程序时以其原始(未编译)形式简要显示角html模板。使用此指令可避免因html模板显示而产生的不受欢迎的闪烁效果。

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

ngCloak与嵌入在angular.js和angular.min.js中的以下css规则协同工作。对于CSP模式，请在html文件中添加角-csp.css(参见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();});

或者您可以以其他方式使用它可能不足以添加显示: none；规则到您的CSS中。如果您要在正文中加载angular.js，或者模板编译得不够快，请使用ng-cloak指令，并在CSS中包含以下内容：

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

Angularjs - ng-cloak/ng-show elements blink

Answer 3

五斗篷也修正了两次点击错误为ng-单击反向。一旦列出这个指令，这个指令就会解决这个问题，用ng点击反向指令的按钮需要两次点击才能执行。