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

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

加载并初始化角度后，将添加新的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>

Answer 2

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

我建议您查看文档：{{3}}

Answer 3

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

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

{{variable}}显示在PageLoad上，然后将其替换为值

3 个答案: