图片

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>

现在，它显示了我的图标字体-加载时仍然非常快地显示。

如何防止这种情况发生？

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？

图片

字体很棒

1 个答案: