javascript - 如何调试 ng-cloak AngularJS？

Question

我有这些图标。

• 图标图片
• icon font-awesome

图片

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

Font Awesome

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

如何防止这种情况发生？

Answer 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>