Angularjs - ng-cloak/ng-show elements blink

javascript angularjs class

2022-08-30 00:51:11

我在角度.js指令/类或.ng-cloakng-show

Chrome 工作正常，但 Firefox 导致带有或的元素闪烁。恕我直言，这是由转换/到引起的，可能Firefox javascript编译器稍微慢一点，所以元素出现一段时间然后隐藏？ng-cloakng-showng-cloakng-showstyle="display: none;"

例：

<ul ng-show="foo != null" ng-cloak>..</ul>

答案 1

虽然文档没有提到它，但将规则添加到CSS中可能还不够。如果您正在加载 angular.js或模板中的模板编译得不够快，请使用该指令并在 CSS 中包含以下内容：display: none;ng-cloak

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

正如评论中提到的，这很重要。例如，如果您有以下标记!important

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

并且您碰巧正在使用，以下选择器更特定于您的'ed元素bootstrap.cssng-cloak

.nav > li > a {
  display: block;
}

因此，如果您包含一个简单，Bootstrap 的规则将优先，并且 will 将设置为，因此您将在模板编译之前看到闪烁。display: none;displayblock

答案 2

如文档中所述，您应该向 CSS 添加一个规则，以根据该属性将其隐藏：ng-cloak

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

我们在“Build with Angular”网站上使用了类似的技巧，您可以在Github上查看源代码：https://github.com/angular/builtwith.angularjs.org

希望有所帮助！