使用ng-cloak创建启动画面

Question

我正在尝试使用AngularJS创建一个启动画面,如AngularJS youtube频道上的演讲中所述:http://youtu.be/xOAG7Ab_Oz0？t = 10m20s

它使用ng-cloak指令.这是HTML:

<head><head>
<body ng-app>
  <!-- inline styles -->
  <div class="splash" ng-cloak="">
    <p>Loading</p>
  </div>
  <!-- Rest of app -->
</body>

而CSS:

[ng-cloak].splash {
    display: block !important;
}
[ng-cloak] {
    display: none;
}
.splash {
    background-color: #428bca;
}

在小提琴中,飞溅div并没有像谈话所说的那样消失.这段代码有问题吗？我弄错了吗？如何实现此启动画面？

Answer 1

这是一个吸烟者:http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG？p = preview

标记:

<div class="splash" ng-cloak="">
    <p>Loading</p>
</div>

<div ng-cloak="">    
    <h1> app loaded </h1>
</div>

CSS:

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}

Answer 2

第二个css选择器是:

[ng-cloak] {
    display: none;
}

应该

.splash {
    display: none;
}

因为angular会在应用程序引导时删除ng-cloak类