AngularJs加载闪烁问题 ng-cloak

来源：互联网发布：已删除未注册域名编辑：程序博客网时间：2024/05/16 07:01

1.在使用AngularJs时当页面中有表单或AngularJs代码加载延迟会出现闪烁的问题

解决方法，是使用ng-cloak指令

定义和用法：

ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生。

ng-cloak 指令没有参数。

实例：

<div ng-app="">    <p ng-cloak>{{ 5 + 5 }}</p></div>

实例2：

在使用ng-show 的时候如果页面中有form表单也会有闪烁现象

<span style="color:#333333;"><div class="container" id="md5Result" >    <div class="row">        <div class="panel panel-success">            <div class="panel-heading">                <h3 class="panel-title">  加密结果：</h3>            </div>            <div class="panel-body" </span><strong><span style="color:#ff0000;"> ng-cloak</span></strong><span style="color:#333333;">>                <div class="list-group" ng-show="showResult"  style="margin:1% 2%;">                    <div class="list-group-item">                        <b> 32位大写：</b>                        {{result.UpperCase32}}                    </div>                    <div class="list-group-item">                        <b> 32位小写：</b>                        {{result.LowwerCase32}}                    </div>                    <div class="list-group-item">                        <b> 16位大写：</b>                        {{result.UpperCase16}}                    </div>                    <div class="list-group-item">                        <b> 15位大写：</b>                        {{result.LowwerCase16}}                    </div>                </div>                <div class="center-block">                    {{result.msg}}                </div>            </div>        </div>    </div></div></span>

0 1