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

Question

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

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

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

谢谢。

Answer 1

请将以下代码添加到 index.html

的头部部分

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

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

谢谢

Answer 2

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

您通常希望将其应用到较大的部分，或者应用到使用 Angular 的页面的整个部分。 objective 是隐藏页面的这些部分，直到 Angular 可以使用。

official documentation 是这么说的：

The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

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

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

Answer 3

没有 [ng-cloak] 当你运行你的应用程序在 angularJs 渲染之前你会看到一些 angular 代码，如“{{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>

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

Where exactly to use ngCloak in existing app

angularjs

ngcloak