如何防止Angular在ng-if评估之前呈现并显示页面？

Question

我写了一段代码，基本上显示了基于“ng-if”评估（true/false）的代码块。我遇到的问题是，即使vm.anyItems等于true，AngularJS也会尝试呈现<p>...</p>块，并在<div>...</div>正确显示之前将其显示在浏览器中。 有什么办法可以防止这种情况发生？

<div ng-if="vm.anyItems"> 
    <div>...</div> 
</div> 
<div ng-if="!vm.anyItems"> 
    <p>XXXXXXXXXXXXX</p> 
</div> 

Answer 1

试着调查ngCloak。这将阻止您的代码在Angular呈现应用程序之后才显示。

您的代码可以做到以下几点：

<div ng-cloak ng-if="vm.anyItems"> 
    <div>...</div> 
</div> 
<div ng-cloak ng-if="!vm.anyItems"> 
    <p>XXXXXXXXXXXXX</p> 
</div> 

来源：https://docs.angularjs.org/api/ng/directive/ngCloak