使用 ng-cloak 创建启动画面 [英] Creating a splash screen using ng-cloak
问题描述
我正在尝试使用 AngularJS 创建启动画面，如 AngularJS youtube 频道上的本次演讲中所述:http://youtu.be/xOAG7Ab_Oz0?t=10m20s
它使用 ng-cloak 指令.这是 HTML:
<body ng-app><!-- 内联样式--><div class="splash" ng-cloak=""><p>加载</p><!-- 应用程序的其余部分 -->
和 CSS:
[ng-cloak].splash {显示:阻止！重要；}[ng-披风] {显示:无；}.飞溅{背景颜色:#428bca；}这是一个小提琴:http://jsfiddle.net/TimFogarty/LaBvW/2/
在小提琴中，飞溅 div 并没有像谈话所说的那样消失.这段代码有什么问题吗?我做错了吗?如何实现此启动画面?
第二个 css 选择器是:
[ng-cloak] {显示:无；}应该
.splash {显示:无；}因为 angular 会在应用启动时移除 ng-cloak 类
I'm trying to create a splash screen using AngularJS as described in this talk on the AngularJS youtube channel: http://youtu.be/xOAG7Ab_Oz0?t=10m20s
It uses the ng-cloak directive. Here's the HTML:
<head><head>
<body ng-app>
<!-- inline styles -->
<div class="splash" ng-cloak="">
<p>Loading</p>
</div>
<!-- Rest of app -->
</body>
And the CSS:
[ng-cloak].splash {
display: block !important;
}
[ng-cloak] {
display: none;
}
.splash {
background-color: #428bca;
}
Here is a fiddle: http://jsfiddle.net/TimFogarty/LaBvW/2/
In the fiddle, the splash div does not disappear as the talk said it would. Is there something wrong with this code? Have I made a mistake? How can I implement this splash screen?
The second css selector which was:
[ng-cloak] {
display: none;
}
should be
.splash {
display: none;
}
because angular will remove the ng-cloak class when the app is bootstrapped
这篇关于使用 ng-cloak 创建启动画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
