ng-cloak 是如何工作的？答案

【问题标题】：How does ng-cloak work?ng-cloak 是如何工作的？
【发布时间】：2015-10-25 23:33:18
【问题描述】：

我一直在看 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 什么时候更新？

【问题讨论】：

标签： javascript angularjs

【解决方案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();});

或者你可以用其他方式使用添加显示可能还不够：无；规则到你的 CSS。如果您在正文中加载 angular.js 或模板没有及时编译，请使用 ng-cloak 指令并在您的 CSS 中包含以下内容：

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

Angularjs - ng-cloak/ng-show elements blink

【讨论】：

【解决方案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.

【讨论】：

【解决方案3】：

ng-cloak 还修复了 ng-click reverse 的两次点击错误。列出此指令后，该指令将解决带有 ng-click 反向指令的按钮需要单击两次才能执行的问题。

【讨论】：