【问题标题】：How do debug ng-cloak AngularJS?如何调试 ng-cloak AngularJS？
【发布时间】：2019-09-16 03:14:27
【问题描述】：

我有这些图标。

图标图片
icon font-awesome

图片

`<img ng-if="device.icon != undefined" src="{{ device.icon }}" width="60px;">`

字体真棒

注意我使用class="ng-cloak"

`<span class="ng-cloak" ng-if="device.icon == undefined">
    <i class="fa fa-fw fa-lg" ng-class="device.status.deviceType.icon"></i>
</span>`

有了这些风格

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

现在，它显示我的图标 font-awesome 在加载时仍然显示得非常快。

如何防止这种情况发生？

【问题讨论】：

标签： javascript css angularjs angular-ng-if angularjs-ng-show

【解决方案1】：

ngCloak 只会阻止元素以未编译的（由 AngularJS）形式显示。它显示简短的原因是因为您的 ngIf 声明，并且简而言之，device.icon 未定义（我假设它正在等待 AJAX 响应）。

如果您根本不希望图标出现，那么请不要包含该标签。否则，您将需要另一个变量来确定何时显示图标，该图标不是基于未定义的状态，而是基于获取设备信息的 AJAX 调用的状态。像这样的：

<span class="ng-cloak" ng-if="ajaxFinished && device.icon == undefined"> <i class="fa fa-fw fa-lg" ng-class="device.status.deviceType.icon"></i> </span>

【讨论】：