Angularjs – ng-cloak/ng-show元素闪烁

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

虽然文档没有提到它，它可能不足以添加display：none;规则到您的CSS。如果你在body中加载angular.js或者模板编译@R_197_11600@，请使用Ng-cloak指令，并在你的CSS中包含以下内容：

/* 
  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>

你碰巧使用bootstrap.css，下面的选择器更具体的你的ng-cloak’ed元素

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

所以如果你包含一个简单的显示：none，Bootstrap的规则将优先，显示将被设置为块，所以你会看到在模板编译之前的闪烁。