it-swarm.com.de

Vermeiden, dass Ausdrücke beim Laden der Seite angezeigt werden

In einem AngularJS-Video habe ich an einer Stelle gesehen, wie vermieden werden kann, dass ein Ausdruck sichtbar ist, bevor das Javascript sie analysiert. Aber ich kann mich nicht erinnern, wie es gemacht wurde ...

Ich habe einen <div id='message'>{{$root.initializing.status}}</div>, den ich "Loading ..." sagen möchte, bevor AngularJS die Möglichkeit hat, es zu analysieren. Wie kann das gemacht werden?

22
Webnet

Wie bereits erwähnt, verwenden Sie ng-cloak. Fügen Sie jedoch auch Folgendes hinzu, wenn es das erste ist, das in Ihre Seite geladen wird.

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

Dadurch wird sichergestellt, dass Ihre Div-Vorlage ausgeblendet ist. Fügen Sie unterhalb dieser Div-Vorlage etwas hinzu 

Die Zuweisung des $ root.initializing.status mit einem echten Wert für ng-hide. 

Hier ist der jsfiddle und der folgende Code ist:

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);
}
37
mitch

Verwenden Sie ng-cloak http://docs.angularjs.org/api/ng.directive:ngCloak

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

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

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

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

16
sk8terboi87 ツ
<div id='message'><span ng-bind="$root.initializing.status"></span></div> 
2
waqas jamil

Verwenden Sie die ng-cloak-Direktive, um das Flimmern beim Laden der Seite zu vermeiden.

1
Umar Adil

Mit ngCloak können Sie einen Ausdruck ausblenden. Siehe Antwort:

Verhindert, dass die doppelte geschweifte Klammer-Notation vorübergehend angezeigt wird, bevor angle.js das Dokument kompiliert/interpoliert

Für das Anzeigen des Ladens können Sie $ root.initializing.status einfach auf den Standardwert "Loading" setzen und dann zurücksetzen, wenn Sie Ihre Daten abrufen.

1
Ryan Quinn

Für den Fall, dass jemand diese Informationen für nützlich hält, verwende ich den folgenden Workaroud.

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

und 

.hide{display: none;}

Damit verstecke ich alle Inhalte, die als eckige Ausdrücke verwendet werden, bis der Controller geladen ist und dort this.pageLoaded = true eingestellt ist.

0
Bruno Henrique