执行前不显示AngularJS代码[重复]

Posted 2023-02-22

【中文标题】执行前不显示AngularJS代码[重复]

【英文标题】：Don't display AngularJS code before execution [duplicate]

【发布时间】：2016-04-11 13:46:47

【问题描述】：

当我重新加载页面时，我的 AngularJS 代码正在显示

问题：如果我的网速较慢或页面未完全重新加载，则不应显示代码。它应该只显示结果。

请帮助我找到最佳解决方案。

【参考方案1】：

ng-cloak 用于相同的用途。在这里阅读https://docs.angularjs.org/api/ng/directive/ngCloak

ngCloak 指令用于阻止 Angular html 模板 浏览器以原始（未编译）的形式简要显示 应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

或者，您也可以替换您的内容

<div>cat1.Title | limitTo:18</div>

喜欢这样：

<div ng-bind="cat1.Title | limitTo:18"></div>

【参考方案2】：

使用 ngCloak 是正确的方法。

确保也添加 CSS，基于这篇文章：Angularjs - ng-cloak/ng-show elements blink

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak 
  display: none !important;