有没有别的方法来隐藏作用域变量，使其在AngularJS加载时不显示?

Question

我是这样使用的:

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

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

Answer 1

有几种方法可以在Angular运行

之前隐藏内容

• 将想要隐藏的内容放到另一个模板中，并使用ngInclude

  <div ng-include="'myPartialTemplate.html'"></div>
  

  如果您实际上不希望向服务器发出另一个请求来获取另一个文件，有几种方法，如$templateCache文档中所述。有一些工具可以将外部HTML模板"编译"成JS，以避免手工完成，比如grunt-angular-templates。

• 与ngInclude类似，如果你把所有东西都放在自定义指令中，并带有自己的模板，那么模板内容将不会显示，直到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文档中所述。

Answer 2

您也可以使用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时很有用。