javascript - ng-cloak 是如何工作的？

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 指令应用于页面的一小部分，以允许渐进式呈现浏览器 View 。

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>

事物.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