使用 ng-cloak 创建启动画面答案

【问题标题】：Creating a splash screen using ng-cloak使用 ng-cloak 创建启动画面
【发布时间】：2014-02-13 05:14:45
【问题描述】：

我正在尝试使用 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;
}

在小提琴中，splash div 并没有像谈话所说的那样消失。这段代码有问题吗？我犯错了吗？如何实现这个闪屏？

【问题讨论】：

这里也描述了这个方法：ng-newsletter.com/advent2013/#!/day/21 跟着这个导致了同样的问题。（事实上，这个网站的代码有错误。id="spalsh" 应该是 class="splash" 但这并没有解决我的主要问题。）

【解决方案1】：

本教程对我有用：http://www.ng-newsletter.com/advent2013/#!/day/21

标记：

<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;
}

【讨论】：

谢谢，好点。让.splash { display: none } 为我修好了。
有时 ng-cloak 不够——我发现有时我的控制器还没有初始化，即使 ng-cloak 已经完成，如果我在屏幕上有一个表单并且用户开始输入，a控制器被加载并清除数据，因为模型为空。这种情况很少发生，但当表单字段被清除时，仍然经常会感到恼火。因此，我在主控制器上使用自定义模型属性isLoaded 来查看加载是否真的完成。

【解决方案2】：

第二个 CSS 选择器是：

[ng-cloak] {
    display: none;
}

应该是

.splash {
    display: none;
}

因为 Angular 会在应用启动时移除 ng-cloak 类

【讨论】：