AngularJS：加载时如何防止页面中出现“代码闪烁”
塞姆雷
我已经使用AngularJS创建了一个简单的应用程序。当我打开页面一秒钟时，会看到以下屏幕：
但是，加载完成后，我会看到已加载和样式化的内容，这很好：
如何防止页面上闪烁AngularJS代码？这和FOUC有关吗？
这是HTML代码：
<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style>
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="left tab-bar-section">
<h1 class="title">Salary Calculator</h1>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Location</label>
</li>
<li><a href="#">United Kingdom</a>
</li>
</ul>
</aside>
<section class="main-section">
<div class="row full-width">
<div class="large-4 columns">
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Annual Salary</a>
</li>
<li class="tab-title"><a href="#panel2">Monthly Expenses</a>
</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/>
</div>
</div>
</div>
<div class="content" id="panel2">
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/>
</div>
</div>
</div>
</div>
</div>
<div class="large-8 columns" ng-cloak >
<table >
<thead>
<tr>
<th width="200"></th>
<th width="250">Yearly</th>
<th width="250">Monthly</th>
<th width="250">Weekly</th>
<th width="250">Daily</th>
</tr>
</thead>
<tbody ng-repeat="val in results">
<tr>
<td>{{val.rowType}}</td>
<td>{{val.yearly}}</td>
<td>{{val.monthly}}</td>
<td>{{val.weekly}}</td>
<td>{{val.daily}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="../bower_components/angularjs/angular.js"></script>
<script src="js/app-service.js"></script>
<script src="js/app-controller.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
编辑：
除已接受的解决方案外，还请参阅我的答案以寻求替代解决方案。
米克尔
ng-cloak会在一定程度上有所帮助，但是您可以使用ng-bind指令（而不是）完全阻止它{{ }}。
例如
<td ng-bind="val.monthly"> </td>
不
<td>{{val.monthly}}</td>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
计算数据帧R中的字符串频率
- 3
如何使用Redux-Toolkit重置Redux Store
- 4
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 5
如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）
- 6
TreeMap中的自定义排序
- 7
TYPO3：将 Formhandler 添加到新闻扩展
- 8
遍历元素数组以每X秒在浏览器上显示
- 9
在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？
- 10
警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？
- 11
无法连接网络并在Ubuntu 14.04中找到eth0
- 12
将辅助轴原点与主要轴对齐
- 13
我可以ping IPv6但不能ping IPv4
- 14
在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过
- 15
提交html表单时为空
- 16
使用C ++ 11将数组设置为零
- 17
如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称
- 18
尝试在Dell XPS13 9360上安装Windows 7时出错
- 19
如何在R中转置数据
- 20
无法使用 envoy 访问 .ssh/config
- 21
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
我来说两句