当我们用AngularJS去开发SPA(单页程序)的时候,切换路由或者刷新界面的时候会经常遇到过出现模板语言的文本闪烁,过一会儿模板语言的文本消失的情况!
其实针对这个问题官方已经提供了解决方案:在模板元素加上 ng-cloak 指令,如:

<div ng-cloak>{{表达式}}</div>

为什么在页面加载的时候会出现模板文本?

这是由于切换View或者刷新界面的时候先要去服务端请求,服务端返回模板,等DOM加载完成(DOM ready)后才执行JavaScript,AngularJS会在DOM Ready后才会去编译解析视图的模板语言,所以对于某些快速解析的浏览器会看见有模板语言闪烁的情况。

为什么加上ng-cloak 指令就解决了呢?

我们通过查看AngularJS的源码会发现下面的代码(摘自1.2.5版本)

 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-start{border-spacing:1px 1px;-ms-zoom:1.0001;}.ng-animate-active{border-spacing:0px 0px;-ms-zoom:1;}</style>');

原来加上ng-cloak指令之后,此元素的样式加上了display:none !important;,默认是不显示的,既然都display:none了,岂不是不显示了?我们又在源码当中找到了ng-cloak 这个directive,在编译的时候会把ng-cloak的样式和属性去除,这样就可以实现去除闪烁的问题了。

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set('ngCloak', undefined);
    element.removeClass('ng-cloak');
  }
});

这样看上去已经解决了,其实不然,如果你强制刷新界面,或者不是SPA程序,还是会出现。因为ng-cloak的样式是通过js写入到head里面的,如果模板加载的速度比写入样式的速度还快呢?岂不是还会出现模板语言文本闪烁,绝招是把这些css写死在样式中或者head里面,这样不管怎么样都不会出现闪烁了。

欢迎转载,转载请说明出处: http://ngnice.com/posts/1177c6aebcbe30