避免在页面加载时显示表达式

Question

在一个AngularJS视频中，我曾经看到过如何避免在Javascript解析表达式之前它是可见的。但我不记得是怎么做到的……

我有一个<div id='message'>{{$root.initializing.status}}</div>，我想在AngularJS有机会解析它之前说"Loading…"。如何做到这一点?

Answer 1

如前所述，使用ng-cloak，但如果它是页面中第一个加载的内容，也可以在CSS中添加以下内容:

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

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

的内容加载……

$root.initializing的赋值。ng-hide的状态值为true。

这是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);
}

Answer 2

使用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

Answer 3

<div id='message'><span ng-bind="$root.initializing.status"></span></div> 

Answer 4

你可以用ngCloak隐藏一个表达式，请看下面的答案:

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

至于显示加载，你可以设置$root.initializing。状态设置为默认值"Loading"，然后在获取数据后重置。

Answer 5

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

Answer 6

为了防止有人发现这些信息有用，我使用了下面的解决方法。

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

和

.hide{display: none;}

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