Ng-cloak解决angularJs中的闪烁问题

最新推荐文章于 2020-12-19 23:55:15 发布

大玉玉

最新推荐文章于 2020-12-19 23:55:15 发布

阅读量5.3k

点赞数

分类专栏： AngularJS Angularjs

本文链接：https://blog.csdn.net/xingyu0806/article/details/51646684

版权

Angularjs 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

AngularJS

4 篇文章 0 订阅

订阅专栏

引言

上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题，这次我们来使用另一种方法解决一下。

在使用angularjs开发评教移动端的时候，我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于Javascript去操作DOM，都会等待DOM加载完成之后。同样，anguarjs等DOM加载完成之后才回去解析html，所以浏览器上会出现闪烁的情况。

解决这个问题，其实angularjs给了一个指令——ng-cloak。我们可以在需要的地方加上这个指令就可以。

<span style="font-size:18px;"><!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-bind directive</title>
</head>
<body ng-controller="HelloController">
<div ng-cloak>
    <p>直接输出字符串字面值</p>
    Hello {{"World"}}
    <hr>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html></span>

原理

Ng-cloak实现原理为：页面初始化是在DOM的header增加一行css代码。

<span style="font-size:18px;"><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
</style></span>

Angualr将带有ng-cloak的元素设置为display:none。等到angularjs解析到带有ng-cloak节点的时候，会把元素上ng-cloak attribute和calss同时remove掉，这样就防止了节点的闪烁。

总结

所有的事情都像老师说的那样：方法总比问题多！

大玉玉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
22
评论
Ng-cloak解决angularJs中的闪烁问题

引言上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题，这次我们来使用另一种方法解决一下。在使用angularjs开发评教移动端的时候，我们经常会看见在Chrome这类快速解析的浏览器上会闪过{{express}}。这是由于Javascript去操作DOM，都会等待DOM加载完成之后。同样，anguarjs等DOM加载完成之后才回
复制链接

扫一扫