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

Question

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>

Answer 1

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.