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

【问题标题】：{{variable}} is displayed on PageLoad,then it is replaced with the value{{variable}} 在页面加载时显示，然后替换为值
【发布时间】：2017-04-08 15:02:06
【问题描述】：

我正在使用 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>

【问题讨论】：

请添加一些代码示例，展示您尝试过的内容。 ng-cloak 一次性屏蔽所有内容，或 ng-bind 单个项目都可以工作，所以如果你发现两者都不起作用，你一定是在答案中误解了一些东西，但没有看到你的代码，我们只是在猜测。
你说得对，对不起。我刚刚发布了一些代码
将 ng-cloak 向上移动到包含您的 ng-app 的 div，同时确保您从 <head> 标记加载角度或插入角度文档中的 CSS 规则。跨度>
@Duncan，但据我所知，不建议在中加载 js 文件
如果您不想从头部加载它，那么只需添加 css 规则。

标签： html angularjs asp.net-mvc

【解决方案1】：

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

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

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

在你的脑海中，要么加载角度，要么如果你真的不想在顶部加载 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>

【讨论】：

【解决方案2】：

您可以在 HTML 元素上使用 ng-bind="variable" 来避免此问题。

我建议你看一下文档：https://docs.angularjs.org/api/ng/directive/ngBind

【讨论】：

【解决方案3】：

使用data-ng-bind="weather"。

如果模板在 Angular 编译之前由浏览器暂时以其原始状态显示，则最好使用 ngBind 而不是 {{ expression }}。由于 ngBind 是一个元素属性，它使用户在页面加载时不可见绑定。

【讨论】：