Question

ng-if有时会导致我的页面上的链接在加载时显示，然后消失。

该链接根本不应该显示，我假设ng-if语句尚未处理，我能够看到它。

有没有办法阻止链接或元素显示？

我也猜测currentClass对象尚未加载，因此ng-if无法评估，但我试图将其默认为隐藏，直到ng-if可以解析。

<span ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse">
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download">
<span class="cec-msword-icon"></span>Download Instructor Guide</a> 
<span>| </span>
</span>

Answer 1

使用ng-cloak。就是这样：

CSS：

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

HTML：

<div ng-cloak> ... </div>

在你的情况下，它将是：

<span ng-cloak ng-if="isFaculty && !currentClass.courseInformation.IsCustomCourse">
<a ng-href="{{$window.BasePath}}lms/class/{{$stateParams.classid}}/instructorguide/download">
<span class="cec-msword-icon"></span>Download Instructor Guide</a> 
<span>| </span>
</span>

记住：

该指令可以应用于元素，但首选用法是将多个ngCloak指令应用于页面的一小部分，以允许逐步呈现浏览器视图。

Answer 2

我有类似的事发生在我身上，我最终发现这是一个角度提供模块ng-animate的功能，

explanation

基本上发生的是当ng-if语句决定一个元素需要消失而不是仅仅删除它时，angular首先将元素添加到ng-leave类中并在片刻之后删除元素，这样做允许您将动画添加到从DOM中删除的元素

我通过添加css选择器解决了这个问题：

.ng-leave {
        display: none;
      }

以这种方式，元素获得一个立即删除它的类。

Answer 3

这里，链接似乎是可见的，因为DOM对象仍然包含链接元素和ng-if只在页面加载后进行隐藏CSS调用。更好地保留ng-cloak CSS类，因为这显示了元素处理直到为加载的页面更改了dom。

ng-if导致链接显示一秒然后消失。如何防止显示

3 个答案: