angularjs - ng-cloak 和 ng-show 在屏幕上闪烁隐藏元素

Question

我有一个 div 元素，我只想在我的项目列表为空时显示。所以我输入了以下内容（在haml中）：

  #no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }

但是，即使在我完成之后，该元素仍在屏幕上闪烁。然后我看到了Angularjs - ng-cloak/ng-show elements blink，但即使在我的 CSS 中添加了以下内容后，仍然会出现闪烁。

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

任何想法我做错了什么？

score 34 · Accepted Answer

您可以将 ng-hide 放在类中，而不会影响 JS 加载后的工作方式。但是，将它放在那里很有用，以便 CSS 在等待 JS 加载时考虑它。

<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
    Some text
</div>        
</div>

score 10 · Accepted Answer

确保上面显示的 ng-cloak CSS 在页面开头加载。

这应该是您需要做的所有事情：

<div ng-hide="items.length" ng-cloak>no items</div>

score 1 · Accepted Answer

没有一个解决方案对我有用。我找到的唯一解决方案如下：

在每个控制器中，添加：

$scope.$on('$viewContentLoaded', function () {
            $scope.completed = true;
});

并在每个视图的 html 中，将 ng-if="completed" 添加到最顶层元素。例如：

<div ng-if="completed">

注意：问题仅限于firefox和ui-router。在那里，ng-cloak 被忽略并且没有 css 解决方法。唯一对我有用的解决方案是我上面给出的解决方案。

score 0 · Accepted Answer

这种解决方法对我有用：

.ng-hide.ng-hide-animate {
    display: none !important;
}

4 回答 4