2016-05-23 9 views
3

Ich habe 4 Formen, von denen angular ng-hide und ng-show verwendet werden, um sie bei Bedarf anzuzeigen. Wenn die Seite jedoch anfänglich geladen wird, werden beim Laden alle Formulare angezeigt und nur nach dem Ladevorgang ausgeblendet. Beim Laden sieht es wirklich beschissen aus. Gibt es eine Möglichkeit, dies zu verhindern?AngularJs ng-hide während des Ladens

+0

[ngCloak] (https://docs.angularjs.org/api/ng/directive/ngCloak) wurde für diesen –

+0

entworfen Wie Wende ich es auf Formulare an? 3 Formulare haben –

+0

Normalerweise möchten Sie es für eine ganze App anwenden, nur für eine Weile, während eckig nicht hier ist. Aber Sie können es auf das anwenden, was Sie wollen - fügen Sie einfach Klasse oder Attribut hinzu ... * Siehe die unten stehende Antwort von docs/@ asdf_enel_hak für die css-Regel * Angular entfernt dieses Zeug, wenn es geladen ist und wird mit Standard-'ngShow/ngHide'-Funktionen versehen. –

Antwort

0

ng-cloak für Sie arbeiten wird

Beispiel:

in Ihrem CSS:

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

und in Ihrem Code:

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

CSS:

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

HTML:

<body ng-cloak> ... </body> 

funktionieren wird, aber es wird ganzen Körper verstecken. https://docs.angularjs.org/api/ng/directive/ngCloak:

Die Richtlinie kann auf das Element aufgebracht werden, aber die bevorzugte Verwendung ist, mehrere ngCloak Richtlinien kleine Abschnitte der Seite zu ermöglichen eine progressive Darstellung des Browser-Ansicht anzuwenden.

so ist es besser, ng-cloak auf bestimmte Elemente anzuwenden:

<div ng-cloak> ... </div> 
<div ng-cloak> ... </div> 
Verwandte Themen