你如何调试 ng-cloak AngularJS？

Question

我有这些图标。

图标图片
图标字体很棒

图片

`<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 在加载时仍然显示得非常快。

如何防止这种情况发生？

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>

你如何调试 ng-cloak AngularJS？

How do debug ng-cloak AngularJS?

javascript

css

angularjs

angular-ng-if

angularjs-ng-show

图片

字体很棒