使用ng-cloak创建启动屏幕 [英] Creating a splash screen using ng-cloak
问题描述
我试图使用AngularJS创建一个初始屏幕，如AngularJS YouTube频道上的此演讲中所述： http：// youtu .be / xOAG7Ab_Oz0？t = 10m20s
它使用ng-cloak指令。这是HTML：
< head>< head&
< body ng-app>
<！ - inline styles - >
< div class =splashng-cloak =>
< p>正在加载< / p>
< / div>
<！ - 其余应用程序 - >
< / body>
和CSS：
[ng-cloak] .splash {
display：block！important;
}
[ng-cloak] {
display：none;
}
.splash {
background-color：＃428bca;
}
这里是一个小提琴： http://jsfiddle.net/TimFogarty/LaBvW/2/
在小提琴中，splash div不会像谈话说的那样消失。这个代码有什么问题吗？我犯了一个错误？
第二个css选择器是：
[ng-cloak] {
display：none;
}
应为
.splash {
display：none;
}
因为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屋！
