ng-bind及ng-cloak解决AngularJs页面加载闪屏问题
使用AngularJs获取数据之后,可以使用双花括号表达式或者是ng-bind指令把数据添加到html中，但是这里涉及到一个前端页面渲染与性能的问题。
如果把js文件放在head头部，这时用户网络不好或者是js文件太大一时加载不完，就会出现页面混乱的局面。所以，一般情况下，我们是把js文件放在html页面的底部，等html和css加载完成之后再来执行js代码，但是在body体中要从Angular中获取数据，否则，网络一卡，用户会看到两个花括号{{]}，而没有任何数据，这种想象称为“闪屏”，下面是具体的解决方法：
使用ng-cloak指令，先把页面隐藏，等angular代码加载完成之后，再把html代码显示出来：
| 06 | "Keywords" content=""> |
| 07 | "Description" content=""> |
| 09 | .ng-cloak{display:none;} |
| 13 | 'app' ng-controller='ctrl' ng-cloak class="ng-cloak"> |
| 20 | type="text/javascript" src="../js/angular.min.js"> |
| 21 | type="text/javascript"> |
| 22 | var m = angular.module('app', []); |
| 23 | m.controller('ctrl', ['$scope', function($scope){ |
|
双花括号和ng-bind各有优势，比如：
双花括号中方便连接字符串，不用担心单引号和双引号的问题：
| 1 | {{name + '正在学习AngularJs'}} |
|
使用ng-bind连接字符串容易出错，需要注意单双引号的问题，而且字符串太多的话，页面不美观：
| 1 | "name+'正在学习AngularJs'">
|
|
所以，需要根据实际情况来选择表达式或指令！
引自：AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
