用于加载消息的ng-cloak相反

Question

我不知道AngularJS框架中是否存在这种情况,但实质上我正在寻找与ng-cloak相反的东西,它隐藏元素直到编译页面.我正在寻找一种方法来显示全屏加载消息,直到页面编译.语言中是否有内容来处理这个问题？

Answer 1

我已经使用如下的有点hacky方法解决了这个问题.主页末尾添加了以下HTML.

<div ng-show="::false" style="position: fixed; height: 100%; width: 100%; background-color: #353535; top: 0; left: 0; z-index: 10000;">
    <div style="display: table; margin: 0 auto; font-size: 26px; color: #CCC;">
        Loading
    </div>
</div>

消息将在整个浏览器中显示,直到编译页面为止,此时ng-show接管并隐藏加载消息.

编辑: Angular 1.3+允许您使用::表达式来防止在每个摘要周期中评估表达式. https://docs.angularjs.org/guide/expression#one-time-binding

Answer 2

<div ng-show>Loading Results...</div>

ng-show 没有指定属性编译 false

Answer 3

您可以使用 css 来存档此行为。

创建一个类：

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}

然后添加：

<div class="splash" ng-cloak> Loading... </div>

这将在 Angular 代码加载之前显示，并在 Angular 代码完成后隐藏。不要忘记用 ng-cloak 包装你的 angular 代码。

<div ng-cloak> Your code... </div>