Angularjs 防止angular.js编译/插入文档之前立即显示双大括号符号

这似乎主要是IE中的一个问题。当需要加载大量图像/脚本时，标记中的文字

{{stringExpression}}

可能会在很长的时间内显示出来，然后在编译/插入文档后消失

---

发生这种情况是否有一个共同的原因表明我做了一些普遍错误的事情，或者是否有一种已知的方法来防止这种情况发生？

我认为您正在寻找

ngclope

指令：

从文件中：

NgClope指令用于防止角度html模板 从浏览器在其原始（未编译）状态下短暂显示 窗体，而您的应用程序正在加载。使用此指令可避免 html模板显示引起的不希望出现的闪烁效果

该指令可应用于

元素，但首选用法是应用多个

ngclope

指向页面小部分的指令，以允许渐进呈现浏览器视图

另外，您可以使用

而不是

{{{hello}

---

要在最后加载脚本时提高class='ng-clope'方法的有效性，请确保在文档的开头加载以下css：

.ng-cloak { display:none; }

---

只需将隐藏CSS添加到页面标题或某个CSS文件：

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

然后您可以根据正常的角度实践使用，它甚至在角度本身加载之前就可以工作

---

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

在CSS中添加以下内容

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

然后在代码中可以添加ng斗篷指令。 比如说,

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

欢迎{{data.name}

---

就这样

您也可以使用

ng attr src=“{{variable}}”

而不是

src=“{{{variable}}”

，并且该属性仅在编译器编译模板后生成。文档中提到了这一点：

我同意@pkozlowski.opensource的答案，但ng clock类不适合我与ng repeat一起使用。所以我建议您对简单的分隔符表达式使用类，比如{{name}}和ng repeat的ngclope指令

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

{{name}

及

{{item.name}

ng bind的一个有时被忽略的特性是，您可以在Angular加载时指定要显示的文本：加载。。。。“加载…”将出现，然后在定义myScopeProperty后被替换。@MarkRajcok:谢谢提示！我不知道。这非常简单和优雅，解决了我自己遇到的一个问题。如果您需要多个表达式，请使用ngBindTemplate。例如，加载…你也可以做{{你好| | |'加载…}}@AndyJoslin Nice。使用这种方法，angular js脚本需要位于头部，而不是页面底部，以避免页面加载时{{}表达式闪烁！重要也是个不错的主意。

visibility:hidden

不是更好吗？@eomeroff，但是

！重要信息

推广要选择的样式是CSS黑客（坏事），对吗？它打破了CSS选择器规则。这就是其中一个例子！为引入了重要信息。@Mark我猜“可见性：隐藏”仍然会呈现模板标记所需的空间，而“显示：无”根本不会呈现任何内容。由于只隐藏了可见性，任何外部元素都可能突然塌陷到真正的内部大小，而不是从无到有地增长到大小。我想这是人们喜欢的为了避免使用原始的有角度的HTML代码，

ngclope

是否广泛使用/最佳实践？这看起来很简单，但我在AngularJS方面没有经验。我认为如果你在身体的最后加载所有脚本，这将不起作用。啊，等等，nvm，如果你最后加载脚本，LOAS的答案就是解决方案。使用html的

部分的.ng-cload-angularjs脚本，使

ngclope

生效。如果我在我的页面的

部分加载

angular.js

，我可以确认它工作得非常好。+1我自己想出了

[ngclope]

选择器，但这是更完整的。回答太棒了！我在我身体的末端加载Angular，所以NgClope不可用，它仍然闪烁{{}。这把它修好了。谢谢你注意到我的错误

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