如何停止显示模板代码?

时间:2014-06-04 06:15:11

标签: angularjs

我有一个工作的helloworld类型的应用程序,但是一旦页面加载,模板代码就会瞬间可见。阻止这种情况发生的最佳方法是什么?

3 个答案:

答案 0 :(得分:2)

您应该使用ngCloak指令:

  

ngCloak指令用于防止Angular html模板   由浏览器以原始(未编译)形式简要显示   在您的应用程序加载时。使用此指令可以避免   由html模板显示引起的不良闪烁效应。

答案 1 :(得分:0)

一个选项可能是将加载图像添加到来自控制器的json对象的ajax调用的post请求中。在数据来自控制器之前,这将显示加载程序而不是代码。除此之外你可以看看ngCloak指令:

  

http://docs.angularjs.org/api/ng.directive:ngCloak

答案 2 :(得分:0)

ngCloak只有在你的应用停留在"Hello World!"阶段才有用,但随着它的增长,ngCloak只是AngularJS性能瓶颈的另一个难题。

ngCloak指令实际上是做什么的,它在ngCloak attribute/class元素中为<head>添加了样式,这些样式来自AngularJS lib .js文件。因此,如果您的页面非常繁重(不仅仅是HelloWorld),那么表达式模板代码将一直持续到AngularJS加载为止。

见这里:http://run.plnkr.co/plunks/8IWriNwkzQ2RWmrrQkwC/

我已经延迟5秒加载Angular,尽管页面上显示ngCloak个表达式。

那么如何解决?

class="ng-cloak"添加到正文中,并将此样式与CSS文件保持一致:

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

Source: Angular Github

一旦加载了角度js并且模板,表达式被编译,angular就会删除这个类!一切都变得快乐。