AngularJS的策略，以防止一个类的无风格的内容
我有一个AngularJS项目，我想在页面加载类名时阻止FOUC。 我已经阅读了ng-template，但是这似乎只对标签内的内容有用。
<body class="{{ bodyClass }}"> 我希望它是在页面加载“login”。 任何策略？ 或者我只需要将其加载并将其加载为“login”，然后手动使用javascript来调整DOM即可。
你正在寻找的是ng-cloak 。
你必须像这样添加它：
<body class="{{ bodyClass }}" ng-cloak>
这将防止不必要的闪烁。
链接到关于这个文档。
编辑：
根据文档，将下面的代码片段放到CSS文件中也是可取的。
“为了获得最好的结果，angular.js脚本必须加载到html文档的head部分;或者，上面的css规则必须包含在应用程序的外部样式表中。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
你面对的一个问题是，在AngularJS加载并开始操作DOM之前，浏览器将显示<body>元素。 其他人对ng-class是正确的，它会做适合的课程，但在Angular准备好之前，你仍然不需要展示任何东西。
在之前的Angular版本中，你可以这样做：
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
在最近的版本中这是行不通的，因为ng-show通过添加和删除ng-hide类（它不像元素属性那么具体）
我最近做的是这样的：
<head> ... <style> <!-- Or you could include this in an existing style sheet --> .ng-cloak { display: none !important; } </style> </head> <body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">
这样做意味着<body>会被ng-cloak类的风格立即隐藏起来。 当Angular启动时，它将处理所有包含ng-class和ng-cloak的指令，所以你的<body>元素将拥有正确的类并且是可见的。
在这里阅读更多ng-cloak指令
有一个解决scheme，在纯CSS的闪存问题是防弹的。 对于您的应用程序根元素的类添加以下内容。 这个解决scheme通过处理的顺序工作：一切都隐藏在CSS中，angular度加载，然后CSS显示应用程序的根。 我喜欢使用它，所以如果页面上有其他非angular元素，它们将首先渲染，使页面加载速度更快。
/* in your CSS file in head */ .myApp { display:none; } <div class="myApp" ng-app="myApp"></div>
在body结束之前添加脚本引用和一些内联CSS：
<script language="javascript" type="text/javascript" src="angular.min.js"></script> <style> .myApp { display:block; } </style> </body>
而不是使用类，你应该使用ng类
<body ng-class="{{ bodyClass }}">
我已经注意到有时候，甚至是ng-cloak似乎并没有真正的工作。 也许我做错了什么。
<body ng-cloak class="{{ bodyClass }}">
我还做了一个类似于@mbokil的小东西，默认情况下可以隐藏元素。 通过使用一个属性select器来定位任何具有ng-cloak属性的元素，你就可以使用angular度指令。 这有几个好处，但主要好处是一旦angular度激发它删除此属性，这将触发重绘。
<style> [ng-cloak] { display:none; } </style>
