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

【问题标题】：Avoiding expressions being shown on page load避免在页面加载时显示表达式
【发布时间】：2015-11-25 20:12:05
【问题描述】：

在一个 AngularJS 视频中，我曾看到如何避免在 Javascript 解析表达式之前使其可见。但我不记得它是如何完成的......

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

【问题讨论】：

【解决方案1】：

正如其他人提到的，使用 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);
}

【讨论】：

【解决方案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

【讨论】：

但是哪个更好？
@pkk：为了显示和隐藏必要性，ngCloak。如果使用元素作为占位符，请使用 ng-bind

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document

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

【讨论】：

这对我不起作用，我仍然在页面上看到 {{myvar}} 闪烁。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

和

.hide{display: none;}

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

【讨论】：