gpt4 book ai didi

javascript - 使用 ng-cloak 创建启动画面

转载 作者:太空狗 更新时间:2023-10-29 13:08:11 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com