Question

我刚开始学习Angular JS。我对下面的代码有疑问。

<html ng-app>
<head>
</head>
</body>
<h1>{{hello}} </h1>
<input type="text" ng-model="hello"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>

查询：这段代码工作正常但是当我刷新页面时，我看到{{hello}}只有一小段时间。为什么？

Answer 1

为什么会这样？

您的浏览器将呈现HTML，并且稍后将使用DOM操作

解决方案1：ng-bind

您可以使用<h1 ng-bind="hello"></h1>填充H1标签。因为要渲染的H1标记内部没有HTML，所以当角度尚未完成魔法时，你不会看到它以{{hello}}符号闪烁。

我认为这样做的缺点是你总是需要在你想要展示的内容周围有一个包装元素。

https://docs.angularjs.org/api/ng/directive/ngBindHtml

解决方案2：ng-cloak

只要角度未准备好，您就可以使用ng-cloak来包装您想要隐藏的任何内容。

看起来像：在你的情况下<h1 ng-cloak>{{ 'hello' }}</h1>或<h1 class="ng-cloak">{{ 'hello' }}</h1>。

我在ng-cloak中看到的好处是你可以用它来包裹更大的区域。您可以使用ng-cloak隐藏整个受角度影响的区域，并在角度未启动并运行时显示加载器动画。

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

Answer 2

你可以改变这个：

<h1>{{hello}} </h1>

到此：

<h1 ng-bind="hello"></h1>

Example

这是因为HTML是在稍后阶段编译的。首先，您会看到HTML，然后构建角度效果。

如果您通过添加属性ng-bind来设置绑定，那么您在HTML代码中没有括号，括号将不会显示一小段时间。

如果您想了解更多相关信息，请参阅：Stack

Answer 3

<body ng-cloak>
<h1>{{hello}}</h1> 
--------
--------
--------
--------

</body>

要防止浏览器显示Angular html模板，请使用ngCloak。

注意：在您的正文标记中使用ngCloak可以帮助您在完整页面上隐藏这些内容。

避免此错误的最佳方法是，使用ng-bing指令参见下面的示例。

<h1 ng-bind="hello"></h1>

Answer 4

使用 ng-cloak 指令。

<h1 data-ng-cloak>{{hello}} </h1>

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板

Angular JS第一篇教程

4 个答案: