Question

在一个AngularJS视频中，我看到了在Javascript解析之前如何避免表达式可见。但我无法记住它是如何完成的......

我有<div id='message'>{{$root.initializing.status}}</div>我想说＆＃34;正在加载......＆＃34;在AngularJS有机会解析之前。怎么办呢？

Answer 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);
}

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隐藏表达式，请参阅以下答案：

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

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

Answer 5

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

Answer 6

如果有人发现此信息有用，我会使用以下工作方法。

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

和

.hide{display: none;}

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

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

6 个答案: