4

ng-if sometimes causes links on my page to show during load time, and then disappear.

The link is not supposed to show at all, and I am assuming that the ng-if statement hasn't been processed yet for the second I am able to see it.

Is there a way to prevent the link or element from showing at all?

I am also guessing that the currentClass object is not loaded yet so the ng-if can't evaluate, but I am trying to default it as hidden until the ng-if can resolve.

<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>
4

3 回答 3

9

使用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 指令应用于页面的一小部分，以允许渐进式呈现浏览器视图。

于 2016-06-17T18:34:40.267 回答
1

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

解释

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

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

.ng-leave {
        display: none;
      }

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

于 2018-01-07T17:19:48.570 回答
0

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

于 2018-01-07T17:33:39.610 回答