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

Question

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

link 根本不应该显示，我假设 ng-if 语句在我能够看到的那一秒还没有被处理。

有没有办法完全阻止 link 或元素显示？

我也猜测 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>

记住：

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

Answer 2

我也遇到过类似的事情，我最终发现这是 angular 模块 ng-animate 提供的功能，

explanation

基本上发生的是，当 ng-if 语句决定一个元素需要消失而不是仅仅删除它时，angular 首先向元素添加 ng-leave class 然后稍后删除元素，这样做是为了让您可以向从 DOM、

中删除的元素添加动画

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

.ng-leave {
        display: none;
      }

以这种方式，元素得到一个 class 立即删除它。

Answer 3

在这里，links 似乎是可见的，因为 DOM 对象仍然包含 link 元素并且 ng-if 只在 CSS 之后执行隐藏调用页面 load.So 最好保留 ng-cloak CSS class，因为这显示了元素处理，直到 dom 为加载的页面更改。

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

ng-if causes links to show for a second then disappear. How to prevent showing

angularjs

angular-ng-if

angularjs-ng-if