我正在尝试使用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;
}
这是一个小提琴:http://jsfiddle.net/TimFogarty/LaBvW/2/
在小提琴中,飞溅div并没有像谈话所说的那样消失。这段代码有问题吗?我弄错了吗?如何实现此启动画面?
答案 0 :(得分:10)
本教程适用于我:http://www.ng-newsletter.com/advent2013/#!/day/21
这是一个掠夺者:http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview
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;
}
答案 1 :(得分:7)
第二个css选择器是:
[ng-cloak] {
display: none;
}
应该是
.splash {
display: none;
}
因为当应用程序被引导时,angular将删除ng-cloak类