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>
ASattar
  • 82
  • 1
  • 7

3 Answers3

9

Use ng-cloak. It goes like that:

CSS:

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

HTML:

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

In your case it will be:

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

Remember:

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.

Łukasz
  • 2,131
  • 1
  • 13
  • 28
1

i had a similar thing happen to me, i eventually found that it was a feature that angular provides with the module ng-animate,

explanation

what basically happens is that when an ng-if statement decides that an element needs to disappear instead of just removing it, angular first adds to the element the ng-leave class and after a few moments removes the element, this is done to allow you to add animations to elements that are beeing removed from your DOM,

i solved this problem by adding a css selector: 

.ng-leave {
        display: none;
      }

in this way the element gets a class that immediately removes it.

amos guata
  • 89
  • 10
0

Here, the links seem to be visible because DOM object still contained the link element and the ng-if doing hide CSS call only after the page load.So better keep ng-cloak CSS class, since this shows the element processing until the dom changed for the loaded page.

Ritesh Tiwari
  • 30
  • 5