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