AngularJs加载闪烁问题 ng-cloak

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值