Question

我正在使用 angular js 制作应用程序。我使用 {{data.content}} 方法绑定页面中的内容，这很好用，但加载网页浏览器时在页面中显示相同的代码。

查看我在页面加载时拍摄的屏幕截图

有没有办法在不使用 ng-bind 方法的情况下清除它？

修改

我尝试过这种方法

为身体添加1个ng-clock

<body ng-app="MyApp"   ng-cloack ng-controller="MyController" >

ng-clock的2 -added css样式

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

但仍然存在同样的问题。

我正在使用最新版本的 chorme 和 mozilla firefox

Answer 1

我认为问题是首次下载时页面角度编译的延迟。请查看ngCloak - https://docs.angularjs.org/api/ng/directive/ngCloak。

ngCloak指令用于阻止Angular html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效应。

因此，将其添加到您的CSS文件中：

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

在你的HTML中：

<body ng-cloak>

注意，对于旧版浏览器＆＃39;支持＆＃39; （例如IE7），它需要是：

<body ng-cloak class="ng-cloak">

Answer 2

添加以下代码，ngCloak会阻止加载时显示模板。

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

然后在body标签中调用此类：

<body ng-cloak class="ng-cloak">