防止在angular.js编译/插值文档之前暂时显示双花括号符号

298

当要加载大量图像/脚本时，在IE中似乎主要是一个问题，可能会有很多时间{{stringExpression}}显示标记中的文字，然后一旦对它的编译/内插完成了角度操作，它们就会消失文件。

是否有常见的原因导致发生这种情况，这表明我做错了什么，还是有已知的方法来防止这种情况发生？

angularjs

— 杰里米·威尔
source

6

这可能会有所帮助：branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

上面是正确的解决方案

— Edmund Rojas

283

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

从文档中：

ngCloak指令用于防止Angular html模板在加载应用程序时被浏览器以其原始（未编译）形式短暂显示。使用此伪指令可避免由html模板显示引起的不希望的闪烁效果。

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

— pkozlowski.opensource
source

1

为了避免使用原始的Angular HTML代码，是ngCloak广泛/最佳实践吗？似乎没什么问题，但是我对AngularJS没有经验。

— 凯文·梅雷迪斯

32

我认为如果在正文末尾加载所有脚本，这将不起作用。

— trusktr 2014年

8

Aaah，等等，nvm，LOAS的答案是最后加载脚本的解决方案。使用.ng-cloak类。

— trusktr 2014年

3

在<head>您的html部分加载angularjs脚本ngCloak才能生效。

— 穆斯塔法

1

如果我angular.js在<head>页面的部分中加载，我可以确认它可以正常工作。

— 阿隆·洛林奇

197

另外，您可以使用代替{{hello}}。

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

— 安德鲁·乔斯林
source

94

有时会忽略的有关ng-bind的一项功能是，您可以指定要在Angular加载时显示的文本： loading ... 。将出现“正在加载...”，然后在定义myScopeProperty后将其替换。

— Mark Rajcok

@MarkRajcok：谢谢小费！我不知道。这非常简单，优雅，可以解决我本人遇到的问题。

— Jim Raden

9

如果需要多个表达式，请使用ngBindTemplate。例如，“>正在加载...

— Mark Rajcok 2012年

27

您也可以执行{{hello || 'loading ...'}}

— 安德鲁·乔斯林

5

@安迪·乔斯林尼斯。使用这种方法，角度js脚本需要位于页面顶部而不是页面的底部，以避免{{}}表达式在页面加载时闪烁。

— s_t_e_v_e

51

为了提高最后一次加载脚本时class ='ng-cloak'方法的有效性，请确保在文档的开头加载以下CSS：

.ng-cloak { display:none; }

— 贷款
source

4

添加！important也不错。

— eomeroff 2013年

12

会visibility: hidden更好吗？

— mpen

2

@eomeroff，但是!importantCSS hack（不好的东西）是要促进一种样式的选择，对吗？它违反了CSS选择器规则。

— 凯文·梅雷迪斯

5

恕我直言，这是！important引入的案例之一。

— lex82 2014年

3

@Mark我猜想“可见性：隐藏”仍会呈现模板标记所需的空间，而“ display：none”则根本不呈现任何内容。在仅隐藏可见性的情况下，任何外部元素都可能突然崩溃为真正的内部大小，而不是从零开始增长为大小。我想这是任何人喜欢的。:)

— James Wilkins 2014年

40

只需将隐藏的CSS添加到页面顶部或您的CSS文件之一即可：

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

然后，您可以按照正常的Angular惯例使用ngCloak指令，并且即使在Angular本身加载之前，它也可以工作。

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

— 贝内特·麦克埃尔维
source

+1我自己提出了[ngcloak]选择器，但这更加完整。

— 皮埃尔·亨利

1

很棒的答案！我在身体末端加载了Angular，因此ngCloak不可用，并且仍然闪烁{{}}。这样就解决了。

— Scottie

21

在您的CSS中添加以下内容

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

然后在您的代码中可以添加ng-cloak指令。例如，

<div ng-cloak>
   Welcome {{data.name}}
</div>

而已！

— 内森（Nathan Senevirathne）
source

6

您也可以使用 ng-attr-src="{{variable}}"代替src="{{variable}}"和属性，只有在编译器编译模板后，才会生成该属性。在文档中对此进行了提及：https : //docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— 马丁·舒勒
source

3

我同意@ pkozlowski.opensource的答案，但是ng-clock类不适用于ng-repeat。因此，我建议您将类用于简单的定界符表达式，例如{{name}}，将ngCloak指令用于ng-repeat。

<div class="ng-cloak">{{name}}<div>

和

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— 杰森
source

感谢您注意到我的错误

— -Jaison