22

在一次 AngularJS 视频中，我看到了如何避免在 Javascript 解析表达式之前使其可见。但是不记得是怎么弄的了...

在 AngularJS 有机会解析它之前，我<div id='message'>{{$root.initializing.status}}</div>想说“正在加载...”。如何才能做到这一点？

4

6 回答 6

37

正如其他人提到的，使用 ng-cloak 但如果它是第一个加载到您的页面中的，也将以下内容添加到您的 CSS 中。

[ng\:cloak],[ng-cloak],.ng-cloak{display:none !important}

这将确保您的 div 模板是隐藏的。在该 div 模板下方，添加类似

正在加载...

$root.initializing.status 的分配导致 ng-hide 的真实值。

这是jsfiddle，以下是代码：

HTML：

<div ng-controller='Ctrl'>
    <div id='message'>{{$root.initializing.status}}</div>
    <div ng-hide="$root.initializing.status">Loading...</div>
</div>

JS：

function Ctrl($timeout, $scope) {
///simulating loading
    $timeout(function () {
        $scope.$root = {
            initializing: {
                status: 'Complete!'
            }
        }
    }, 2000);
}
于 2013-06-13T18:10:03.010 回答
16

使用 ng-cloak http://docs.angularjs.org/api/ng.directive:ngCloak

<div id="template1" ng-cloak>{{ 'hello' }}</div>

或 ng-bind http://docs.angularjs.org/api/ng.directive:ngBind

Hello <span ng-bind="name"></span>!

https://stackoverflow.com/a/14076004/1172872

于 2013-06-13T15:50:44.470 回答
2 
<div id='message'><span ng-bind="$root.initializing.status"></span></div>
于 2015-11-25T12:12:05.083 回答
1

您可以使用 ngCloak 隐藏表达式，请参阅此答案：

防止双花括号符号在 angular.js 编译/插入文档之前暂时显示

至于显示加载，您可以将 $root.initializing.status 设置为默认值“正在加载”，然后在获取数据时将其重置。

于 2013-06-13T15:52:15.870 回答
1

使用ng-cloak指令来避免页面加载时的闪烁。

于 2015-07-11T04:42:27.207 回答
0

以防万一有人发现此信息有用，我正在使用以下解决方法。

<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>

和

.hide{display: none;}

我使用它来隐藏所有作为角度表达式的内容，直到加载控制器，我在其中设置this.pageLoaded = true.

于 2015-07-22T12:04:40.380 回答