angularjs - 在现有应用程序中究竟在哪里使用 ngCloak

Question

我们有一个 AngularJS 应用程序（不是 SPA）。我们面临这个问题，即未编译模板的某些部分会短暂显示，因此我将 ngCloak 指令应用于应用程序。

我不确定该指令到底应该在哪里使用 - 每个单个、小元素或大部分（或其他地方）。我目前正在做的是通过 Chrome 开发工具将连接限制到非常慢的速度，然后检查模板的哪些部分以原始状态显示。但我觉得这不是一个非常确定的方法。

所以我想知道在哪里使用ngCloak。

谢谢你。

score 2 · Accepted Answer

将 ngCloak 应用于每个小元素肯定是错误的方法。

您通常希望将其应用到较大的部分，或者应用到使用 Angular 的页面的整个部分。目标是在 Angular 准备好使用之前隐藏页面的这些部分。

这是官方文档所说的：

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

如果您不希望您的用户看到空白区域，您可以显示加载动画，直到 Angular 完成加载。你可以通过给元素一个ng-show="false"指令来做到这一点：

<img src='/images/loading.gif' ng-show='false' />

score 1 · Accepted Answer

请将以下代码添加到 index.html 的 head 部分

<style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>

您可以将相同的代码添加到您的 css 文件中

谢谢

score 0 · Accepted Answer

如果没有 [ng-cloak]，当您在 angularJs 渲染之前运行应用程序时，您会看到一些像“{{myngModel}} 之类的角度代码，当您将 [ng-cloak] 放入项目中运行时，您没有看到那些代码直到渲染完成。

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

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>app</title>
</head>

<body ng-cloak>
</body>

</html>

3 回答 3