如何调试 ng-cloak AngularJS？

Posted 2023-03-06

【中文标题】如何调试 ng-cloak AngularJS？

【英文标题】：How do debug ng-cloak AngularJS?

【发布时间】：2019-09-16 03:14:27

【问题描述】：

我有这些图标。

图标图片 icon font-awesome

图片

`<img ng-if="device.icon != undefined" src=" device.icon " >`

字体真棒

注意我使用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 在加载时仍然显示得非常快。

如何防止这种情况发生？

【参考方案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>