我正在尝试使用 AngularJS 创建启动画面，如 AngularJS youtube channel 上的本次演讲所述: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;
}
这是一个 fiddle :http://jsfiddle.net/TimFogarty/LaBvW/2/
在 fiddle 中，启动 div 并没有像谈话中所说的那样消失。这段代码有什么问题吗？我做错了吗？我该如何实现这个闪屏？
最佳答案
本教程对我有用:http://www.ng-newsletter.com/advent2013/#!/day/21
这是一个笨蛋:http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview
注意一些事情:
- 在演示中，我手动引导 angular 来模拟加载。
- 启动画面标记应具有
ng-cloak属性 - 模板的其余部分应该有
ng-cloak属性
标记:
<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;
}
关于javascript - 使用 ng-cloak 创建启动画面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21294917/