在使用Anguarjs进行web开发或者进行SPA（single page application）开发时，往往会遇到下面这样的问题。

刷新页面时，页面会出现一些乱码，这里的乱码具体是指`{{expression}}`或者`{{expression | filter}}`这种形式的表达式乱码，然后这些乱码又快速的消失了，然后页面就正常了。这个问题的原因是，在一些现代浏览器，比如Chrome，Firefox等中尤为严重。当然还跟环境的网络速度有关。

出现这个问题的根本原因是，JavaScript操作DOM都是在DOM加载完成（DOM Ready）之后的才进行的。换句话说，Angularjs只会在DOM Ready之后才回去解析html模版以及Angularjs的directive，在这之前html模版中的内容会被原封不动的展示在页面，这时候就会出现所谓的乱码问题。

那么我们如何解决这个问题呢？

Angularjs官方针对这个问题提供了原生的解决方案，就是我们今天要说的主角 ng-cloak 指令。

我们先来看一下Angularjs的源码中对这个 ng-cloak 是如何实现的。

Angularjs将 ng-cloak 实现为directive，其代码如下，

!angular.$$csp()

&& angular

    .element(document)

    .find('head')

    .prepend('<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-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}' +

        </style>');

大家不要对这一坨代码感到畏惧，其实它做的事很简单，就是在html的中 head 标签中插入一段内联的css样式。其中部分的代码是这样的，

[ng\\:cloak],

[ng-cloak],

[data-ng-cloak],

[x-ng-cloak],

.ng-cloak,

.x-ng-cloak,

.ng-hide {

    display:none !important;

}
 

很显然，Angularjs对 ng-cloak 相关的元素设置了 display: none !important 这样一个属性，目的就是隐藏相关元素。这样在在DOM还没有Ready的时候，将相关元素隐藏起来，这样页面就不会出现乱码了。

当DOM Ready的时候，Angularjs开始解析指令。我们来看一下 ng-cloak 这个指令都做了哪些事情，

var ngCloakDirective = ngDirective({

    compile: function(element, attr) {

        attr.$set('ngCloak', undefined);

        element.removeClass('ng-cloak');

    }

});

可见，当Angularjs开始解析 ng-cloak 指令的时候，又会把这个样式给去除掉。这样页面又显示了。

通过以上分析，我们知道了使用 ng-cloak 指令来避免页面出现乱码的原理，其实通过先隐藏后显示来规避了DOM尚未Ready这段时间的真空期。

理论是美好的，但是现实往往会给我一个响亮的耳光。

在实际使用的过程中，我们要想使上面的过程完美表现，就必须要先在 head 标签中先引入Angularjs的源码，而不能在页面的最后引入Angularjs文件。

因为后者会造成这样一种情况：在Angularjs文件还没引入时，意味着还没给 ng-cloak 相关元素做隐藏处理，页面就已经展示了，这是页面仍然会出现乱码。

但是一般性的原则告诉我们， 应该把css文件放在头部，把js文件放在尾部 。那么我们如何解决这个矛盾呢？

解决方案是，我们手动在 head 中将 ng-cloak 相关的元素设置为隐藏，即添加如下的代码，

<head>

    <style>

        [ng:cloak],

        [ng-cloak],

        [data-ng-cloak],

        [x-ng-cloak],

        .ng-cloak,

        .x-ng-cloak {

            display:none !important;

        }

    </style>

</head>

或者将这一段代码放在我们在 head 中加载的css文件中，这样就可以确保页面加载的时候，不管它有没有DOM Ready， ng-cloak 相关元素肯定是隐藏的。

如果你发现在 body 上加了 ng-cloak ，但是仍然不起作用，那么原因应该就是上面所描述的，这时候你就需要在 head 中添加隐藏代码或者在引入的css文件中添加相关代码了。

最后提一点，如果 中的表达式仅仅是展示一些文本内容，我们可以使用 ng-bind这个指令来实现。

使用Angularjs的ng-cloak指令避免页面乱码的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  3. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  4. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  5. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  6. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  7. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  8. 项目部署到weblogic后页面乱码问题

    问题描述: windows环境下,将项目部署到weblogic运行startWebLogic.cmd启动weblogic后,浏览器访问页面乱码问题,在Tomcat不会乱码. 请不要看着博文就直接改了, ...

  9. maven-eclipse 中index.html页面乱码

    maven-eclipse 中index.html页面乱码: pox.xml修改: <project> -- <properties> <argLine>-Dfil ...

随机推荐

  1. Java多线程开发系列之一：走进多线程

    对编程语言的基础知识:分支.选择.循环.面向对象等基本概念理解后,我们需要对java高级编程有一定的学习,这里不可避免的要接触到多线程开发. 由于多线程开发整体的系统比较大,我会写一个系列的文章总结介 ...

  2. LayaAir学习笔记

    1.Text文本类 var Text=laya.display.Text; Laya.init(620,400); Laya.stage.bgColor="#323232";//设 ...

  3. Samsung S4卡屏卡在开机画面的不拆机恢复照片一例

    大家好!欢迎再次来到我Dr.wonder的世界, 今天我给你们带来Samsung S4 I9508 卡屏开在开机画面的恢复!非常de经典. 首先看图 他开机一直卡在这里, 然后 ,我们使用专业仪器,在 ...

  4. 修改远程桌面连接端口3389，RDP-Tcp的portnumber要用十六进制修改

    1. 运行regedit 2. 展开 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Tds ...

  5. ASP.NET MVC5----基本用法

    由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...

  6. header中Content-Disposition的作用

    在servlet3.0中 支持文件上传的注解@MultipartConfig 发现有个例子开头打印的信息中有Content-Disposition,一时好奇,所以了解了一下.顺便学习一下文件上传所需要 ...

  7. 关于yuv与rgb的互转

    来自以下网址:http://stackoverflow.com/questions/9465815/rgb-to-yuv420-algorithm-efficiency #define CLIP(X) ...

  8. Kafka学习笔记-Java简单操作

    Maven依赖包: <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka ...

  9. nodejs学习笔记一：安装express框架并构建工程目录

    偶遇node是在一个阳光明媚的上午,无意间打开博客看到一片关于nodejs的介绍,通读全篇后,心情跌宕起伏,哎呀,这么好的东西我竟然现在才知道,这是最气的,于是马上开始制定学习nodejs计划,好了, ...

  10. mySQL函数根据经纬度计算两点距离

    DROP FUNCTION IF EXISTS func_calcDistance ; CREATE FUNCTION func_calcDistance( origLng ,), -- 目的地经度 ...