html - {{variable}} 在页面加载时显示，然后替换为值

Question

我正在使用 AngularJS 并且对它很陌生。在我的 pageLoad 上，它显示 {{weather}} 并被替换为正确的值。我认为 angularjs 比 html 加载得晚。我该如何解决这个问题？

<div class="visible-md visible-lg col-md-3 text-center">
     <div class="currency" ng-controller="CurrencyController">
          <h3>Döviz</h3>
          <span ng-bind="currencies" ng-cloak></span>
     </div>
</div>

Answer 1

在包含您的ng-app 的元素的类中使用angular 的ng-cloak 指令。这将阻止任何部分加载的 Angular 应用程序在全部加载和初始化之前显示。请注意，您必须确保在页面的 HEAD 中同步加载 Angular 本身才能使其正常工作，或者如果您只能在末尾加载它，则可以添加一个 css 规则(请参阅文档链接)以隐藏

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

一旦加载并初始化，angular 将添加一个新的 css 规则来覆盖对 ng-cloak 指令的隐藏。

在你的脑海中，要么加载 Angular ，要么如果你真的不想在顶部加载 javascript:

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

它应该看起来像这样:

<div ng-app="myApp" class="ng-cloak">
   ... rest of your app ...
</div>

或者如果你愿意:

<div ng-app="myApp" ng-cloak>
   ... rest of your app ...
</div>