在加载 AngularJS 时，是否有其他方法可以隐藏范围变量以使其不显示？答案

【问题标题】：Is there a different way to hide a scope variable from showing while AngularJS is loading?在加载 AngularJS 时，是否有其他方法可以隐藏范围变量以使其不显示？
【发布时间】：2014-05-04 15:18:28
【问题描述】：

我是这样用的：

<div ng-cloak>{{ message.userName || message.text }}</div>

这是确保用户在 AngularJS 仍在加载时看不到 {{ }} 的唯一/最佳方法吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

在 Angular 有机会运行之前，有几种方法可以隐藏内容

把你要隐藏的内容放到另一个模板里，用ngInclude
```
<div ng-include="'myPartialTemplate.html'"></div>
```
如果您实际上不希望向服务器发出另一个请求来获取另一个文件，有几种方法，如 $templateCache docs 中所述。有一些工具可以将外部 HTML 模板“编译”成 JS，以避免必须手动执行此操作，例如 grunt-angular-templates。
类似于ngInclude，如果您将所有内容都放在custom directives 中，并带有自己的模板，那么在Angular 有机会运行之前不会显示模板内容。
```
<my-directive></my-directive>
```
定义为：
```
app.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>Content hidden until Angular loaded</div>'
  }
});
```

ngBind 替代 {{}} 块

<div>Hello <span ng-bind="name"></span></div>

ngCloak 正如您所提到的（为了完整起见，在此列表中）。
```
<div ng-cloak>Content hidden until Angular compiled the template</div>
```
但您必须在浏览器呈现页面之前加载某些样式，如ngCloak docs 中所述。

【讨论】：

【解决方案2】：

您也可以按照documentation 的说明使用ng-bind。

ng-bind 的一个典型优势是能够在 Angular 加载时提供默认值（实际上，ng-cloak 只能隐藏内容）：

<p>Hello, <span ng-bind="user.name">MyDefaultValueWhileAngularIsLoading<span/></p>

那么一旦 Angular 被加载，值就会被 user.name 替换。

此外，ng-cloak 在处理特定元素上的块（许多 HTML 行）和 ng-bind 时很有用。

【讨论】：

有什么区别还是推荐一个？我也可以在这种情况下使用 ng-bind 吗？我有一些条件，如果另一个是 null 则显示一个？