Cas*_*ynn 54 javascript interpolation dom fouc angularjs
我有一个AngularJS项目,我想在页面加载类名时阻止FOUC.我读过关于ng-template的内容,但这似乎只对标签内的内容有用.
<body class="{{ bodyClass }}">
我想在页面加载时"登录".对此有何策略？或者我只需要捏造它并将其加载为"登录"并手动使用javascript来为此实例调整DOM.
the*_*lay 78
你在寻找什么ng-cloak.
你必须像这样添加它:
<body class="{{ bodyClass }}" ng-cloak>
这样可以防止不必要的闪烁.
链接到关于此的文档.
编辑:
根据文档,建议将下面的代码段放入CSS文件中.
"为了获得最佳结果,必须在html文档的head部分中加载angular.js脚本;或者,上面的css规则必须包含在应用程序的外部样式表中."
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Nic*_*een 23
您面临的一个问题是浏览器将<body>在AngularJS加载并开始操作DOM之前显示该元素.其他人说的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启动时,它将处理所有指令include ng-class和ng-cloak,因此您的<body>元素将具有正确的类并且可见.
在这里阅读更多ng-cloak指令
在纯CSS中有一个防弹问题的解决方案.对于app根元素的类,添加以下内容.此解决方案按处理顺序工作:一切都隐藏在CSS中,角度加载,然后CSS显示应用程序根目录.我喜欢使用它,所以如果页面上有其他非角度元素,它们将首先渲染,使页面看起来加载更快.
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
在正文结束之前添加脚本引用和一些内联CSS:
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
| 归档时间： |
|
| 查看次数： |
27320 次 |
| 最近记录： |