是否有一种不同的方法可以在AngularJS加载时隐藏范围变量？

Question

我正在使用这种方式：

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

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

Answer 1

您也可以ng-bind使用ng-bind解释。

关于ng-cloak的典型优势是能够在加载Angular时提供默认值（事实上，<p>Hello, <span ng-bind="user.name">MyDefaultValueWhileAngularIsLoading<span/></p> 只能隐藏内容）：

user.name

然后，一旦加载了Angular，该值将被ng-cloak替换。

此外，ng-bind在处理特定元素上的块（许多HTML行）和{{1}}时非常有用。

Answer 2

在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中所述。