防止双重大括号表示法在angular.js编译/插入文档之前暂时显示

Jer*_*eir 297 angularjs

当IE中存在大量要加载的图像/脚本时,它似乎主要是一个问题,{{stringExpression}}标记中文字的显示时间可能会很长,然后一旦完成角度的编译/插值就会消失.该文件.

有没有一个共同的原因,为什么会发生这种情况,这表明我做的事情总体上是错误的,或者是否有一种已知的方法来阻止这种情况?

pko*_*rce 281

我认为您正在寻找该ngCloak指令:https://docs.angularjs.org/api/ng/directive/ngCloak

从文档:

ngCloak指令用于防止浏览器在加载应用程序时以原始(未编译)形式短暂显示Angular html模板.使用此指令可避免html模板显示导致的不良闪烁效应.

该指令可以应用于<body>元素,但首选用法是将多个ngCloak 指令应用于页面的小部分,以允许逐步呈现浏览器视图

  • 如果您在正文末尾加载所有脚本,我认为这不会起作用. (32认同)
  • Aaah,等等,nvm,LOAS的答案是最后加载脚本的解决方案.使用.ng-cloak类. (8认同)
  • 在你的html的`<head>`部分加载angularjs脚本以使`ngCloak`生效. (3认同)

And*_*lin 196

此外,您可以使用<span ng-bind="hello"></span>而不是{{hello}}.

http://jsfiddle.net/4LhN9/34/

  • 关于ng-bind的一个有时被忽略的功能是你可以指定在Angular加载时显示的文本:<span ng-bind ="myScopeProperty"> loading ... </ span>.将出现"loading ...",然后在定义myScopeProperty后进行替换. (94认同)
  • 你也可以做{{hello || "正在载入"}} (27认同)
  • 如果需要多个表达式,请使用ngBindTemplate.例如,<span ng-bind-template ="{{scopeProperty1}} {{scopeProperty2}}"> loading ... </ span> (9认同)
  • @AndyJoslin很好.使用这种方法,角度js脚本需要位于头部,而不是页面底部,以避免{{}}表达式在页面加载时闪烁. (5认同)

LOA*_*OAS 51

要在最后加载脚本时提高class ='ng-cloak'方法的有效性,请确保在文档的头部加载以下css:

.ng-cloak { display:none; }
Run Code Online (Sandbox Code Playgroud)

  • "能见度:隐藏"会不会更好? (12认同)
  • 恕我直言,这是其中一个案例!重要的是介绍. (5认同)
  • 添加!重要也不错. (4认同)
  • @Mark我猜想"visibility:hidden"仍然会渲染模板标记所需的空间,而"display:none"根本不会呈现任何内容.只有隐藏的可见性,任何外部元素可能会突然崩溃到真正的内部大小,而不是从无到有增长到大小.我想这是任何人都喜欢的.:) (3认同)
  • @eomeroff,但是`!important`是一个CSS**黑客**(不好的东西)来推广一个风格被选中,对吧?它打破了CSS选择器规则. (2认同)

Ben*_*wee 39

只需将隐藏的CSS添加到页面的头部或一个CSS文件中:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}
Run Code Online (Sandbox Code Playgroud)

然后你可以根据正常的Angular实践使用ngCloak指令,它甚至可以在加载Angular之前工作.

这正是Angular所做的:angular.js末尾的代码将上述CSS规则添加到页面的头部.


小智 21

在你的CSS中添加以下内容

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }
Run Code Online (Sandbox Code Playgroud)

然后在你的代码中你可以添加ng-cloak指令.例如,

<div ng-cloak>
   Welcome {{data.name}}
</div>
Run Code Online (Sandbox Code Playgroud)

而已!


小智 6

您也可以使用ng-attr-src="{{variable}}"而不是,src="{{variable}}"只有在编译器编译模板后才会生成属性.这在文档中提到:https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings