在使用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. 解决：IntelliJ IDEA 编译错误，提示 Compilation failed: internal java compiler error

    原因可能是项目指定的JDK与当前环境JDK不符合,解决办法:File->Setting->Compiler->Java Compiler, 在相应的module中选择合适的JDK版本 ...

  2. 003-常用的Meta标签写法和作用

    页面关键词<meta name="keywords" content="your,tags"/> 页面描述<meta name="d ...

  3. jsonp

    一次关于JSONP的小实验与总结   前言: 今天,无意间看到自己某个文件夹下有个JSONP的东西.慢慢回忆起,这个东西是之前想写的一个demo,也不知道是多久以前了,但是不知道怎么的,给忘那边了.那 ...

  4. Windows Phone 四、控件模版

    控件模版的概念 Windows Phone中每一个控件都有一个默认的模版,用于描述控件的内部组成结构和外观样式 相对于原本的样式外观操作,自定义模版的可自定义性更强 最基本的重写控件模版 <Gr ...

  5. Android隐藏状态栏、导航栏

    Android隐藏状态栏.导航栏 private void hideStatusNavigationBar(){ if(Build.VERSION.SDK_INT<16){ this.getWi ...

  6. html5，单击显示详细信息

    <details open="">    <summary>点击率</summary>        <p>详细信息</p&g ...

  7. UEFI Bootable USB Flash Drive - Create in Windows(WIN7 WIN8)

    How to Create a Bootable UEFI USB Flash Drive for Installing Windows 7, Windows 8, or Windows 8.1 In ...

  8. java加法流程图

  9. Configure Visual Studio 2013 for debugging .NET framework

    https://referencesource.microsoft.com/ In order to configure Visual Studio 2013 do the following in ...

  10. C# : CEF操作

    代码挺差的,仅供学习.参考 class CEFGlueLoader { class CefAppImpl : CefApp { protected override void OnBeforeComm ...