使用ng-cloak创建启动画面

时间:2014-01-22 22:01:10

标签: javascript html css angularjs

我正在尝试使用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并没有像谈话所说的那样消失。这段代码有问题吗?我弄错了吗?如何实现此启动画面?

2 个答案:

答案 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类